@charset "utf-8";
@import "common/reset";
@function p($px) {
    @return $px/2+px;
}

.web {
    .menu {
        position: fixed;
        bottom: p(60);
        z-index: 5;
        width: 100%;
        li {
            margin: 0 auto;
            width: p(171);
            height: p(70);
            overflow: hidden;
            img {
                vertical-align: top;
                width: 100%;
            }
        }
    }
    .indexweb {
        width: 100%;
        height: 100%;
        //第一题
        .section1 {
            background: url(../img/kugou-7.png) no-repeat;
            background-size: cover;
            font-size: 0;
            //          overflow: hidden;
            padding-top: p(44);
            position: relative;
            .logo {
                width: p(103);
                height: p(38);
                overflow: hidden;
                margin-left: p(44);
                //              margin-top:r(44);
                img {
                    width: 100%;
                }
            }
            .chao {
                margin: auto;
                width: p(381);
                height: p(71);
                overflow: hidden;
                margin-top: p(79);
                img {
                    width: 100%;
                }
            }
            .hou {
                margin: auto;
                width: p(576);
                height: p(157);
                overflow: hidden;
                img {
                    width: 100%;
                }
            }
            .nian {
                margin: auto;
                width: p(352);
                height: p(62);
                overflow: hidden;
                img {
                    width: 100%;
                }
            }
            .can {
//              position: relative;
                margin: auto;
                margin-top: p(12);
                width: p(341);
                height: p(29);
                overflow: hidden;
//              left: -100%;
                img {
                    width: 100%;
                }
            }
            .huang {
                overflow: hidden;
                position: relative;
                .lian {
                    width: p(204);
                    height: p(222);
                    overflow: hidden;
                    float: right;
                    margin-right: p(20);
                    vertical-align: top;
                    transform: scale(1);
                    animation-name: liant;
                    animation-duration: 1s;
                    animation-iteration-count: infinite;
                    img {
                        width: 100%;
                    }
                }
                @keyframes liant {
                    0% {
                        transform: scale(1);
                    }
                    50% {
                        transform: scale(1.1);
                    }
                }
                .yue {
                    margin-top: p(179);
                    margin-left: p(100);
                    width: p(94);
                    height: p(69);
                    overflow: hidden;
                    transform: scale(1);
                    animation-name: yuet;
                    animation-duration: 1s;
                    animation-delay: 1.2s;
                    img {
                        width: 100%;
                    }
                }
                @keyframes yuet {
                    0% {
                        transform: scale(1);
                    }
                    50% {
                        transform: scale(1.3);
                    }
                }
                .gui {
                    width: p(148);
                    height: p(82);
                    overflow: hidden;
                    position: absolute;
                    top: p(200);
                    left: p(520);
                    transform: scale(1);
                    animation-name: guit;
                    animation-duration: 1s;
                    animation-delay: 1s;
                    img {
                        width: 100%;
                    }
                }
                @keyframes guit {
                    0% {
                        transform: scale(1);
                    }
                    50% {
                        transform: scale(1.3);
                    }
                }
                .qi {
                    width: p(128);
                    height: p(78);
                    overflow: hidden;
                    margin-top: p(184);
                    margin-left: p(100);
                    transform: scale(1);
                    animation-name: qit;
                    animation-duration: 0.5s;
                    animation-delay: 1.5s;
                    img {
                        width: 100%;
                    }
                }
                @keyframes qit {
                    0% {
                        transform: scale(1);
                    }
                    50% {
                        transform: scale(1.2);
                    }
                }
                .fei {
                    width: p(94);
                    height: p(57);
                    overflow: hidden;
                    position: absolute;
                    top: p(440);
                    left: p(560);
                    transform: scale(1);
                    animation-name: feit;
                    animation-duration: 0.5s;
                    animation-delay: 1.8s;
                    img {
                        width: 100%;
                    }
                }
                @keyframes feit {
                    0% {
                        transform: scale(1);
                    }
                    50% {
                        transform: scale(1.2);
                    }
                }
                .huan {
                    width: p(339);
                    height: p(421);
                    overflow: hidden;
                    position: absolute;
                    top: p(100);
                    left: p(210);
                    transform: translateX(-300%);
                    transition-timing-function: cubic-bezier(.84, -0.11, .63, 1.42);
                    animation-name: hhou;
                    animation-duration: 3s;
                    animation-fill-mode: forwards;
                    img {
                        width: 100%;
                    }
                }
                @keyframes hhou {
                    0% {
                        transform: translateX(-100%);
                    }
                    50% {
                        transform: translateX(20%);
                    }
                    100% {
                        transform: translateX(0%);
                    }
                }
            }
            .yu {
                width: p(58);
                height: p(43);
                overflow: hidden;
                position: absolute;
                top: p(600);
                left: p(100);
                transform: translateX(0);
                animation-name: yuj;
                animation-duration: 5s;
                animation-iteration-count: infinite;
                img {
                    width: 100%;
                }
            }
            @keyframes yuj {
                0% {
                    transform: translateX(-0%);
                }
               
                100% {
                    transform: translateX(-200%);
                    opacity: 0;
                }
            }
            .yul {
                width: p(77);
                height: p(56);
                overflow: hidden;
                position: absolute;
                top: p(500);
                left: p(200);
                animation-name: yuj;
                animation-duration: 6s;
                animation-iteration-count: infinite;
                img {
                    width: 100%;
                }
            }
            .yui {
                width: p(43);
                height: p(32);
                overflow: hidden;
                position: absolute;
                top: p(650);
                right: p(30);
                animation-name: yuj;
                animation-duration: 7s;
                animation-iteration-count: infinite;
                img {
                    width: 100%;
                }
            }
            .yuo {
                width: p(34);
                height: p(25);
                overflow: hidden;
                position: absolute;
                top: p(800);
                right: p(30);
                animation-name: yuj;
                animation-duration: 8s;
                animation-iteration-count: infinite;
                img {
                    width: 100%;
                }
            }
            .yud {
                width: p(59);
                height: p(44);
                overflow: hidden;
                position: absolute;
                top: p(860);
                left: p(100);
                animation-name: yuj;
                animation-duration: 9s;
                animation-iteration-count: infinite;
                img {
                    width: 100%;
                }
            }
        }
        //第二题
        .section2 {
            .weiti {
                background: url(../img/haoyou-3.png) no-repeat;
                background-size: cover;
                overflow: hidden;
                p {
                    margin-top: p(103);
                    margin-left: p(48);
                    font-size: p(34);
                    color: #fff;
                }
                .man {
                    margin: 0 auto;
                    margin-top: p(40);
                    width: p(250);
                    height: p(350);
                    overflow: hidden;
                    position: relative;
                    z-index: 1;
                    img {
                        width: 100%;
                    }
                }
                .xy {
                    position: relative;
                    top: p(-180);
                    text-align: center;
                    img:nth-child(1) {
                        position: absolute;
                        top: p(100);
                        left: p(100);
                        width: p(112);
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 4s;
                        animation-iteration-count: infinite;
                    }
                    @keyframes hy {
                        0% {
                            transform: translateX(0);
                        }
                       
                        100% {
                            transform: translateX(p(-340));
                            opacity: 0;
                        }
                    }
                    img:nth-child(2) {
                        width: p(112);
                        margin-right: p(80);
                        margin-left: p(66);
                        position: absolute;
                        top: 0;
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 5s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(3) {
                        width: p(64);
                        margin-right: p(68);
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 6s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(4) {
                        width: p(63);
                        position: absolute;
                        right: 0;
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 7s;
                        animation-iteration-count: infinite;
                    }
                }
                ul {
                    .wang {
                        height: p(63);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "A   王俊凯";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/neiye-2.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .qiang {
                        height: p(63);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        margin-top: p(29);
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "B   易烊千玺";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .yuan {
                        height: p(63);
                        margin-top: p(29);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "C   王源";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .kai {
                        height: p(63);
                        margin-top: p(29);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "D   王凯";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    #chec {
                        display: none;
                    }
                    #chec:checked~label .qiang::after {
                        display: block;
                    }
                    #check {
                        display: none;
                    }
                    #check:checked~label .wang::after {
                        display: block;
                    }
                    #che {
                        display: none;
                    }
                    #che:checked~label .yuan::after {
                        display: block;
                    }
                    #checkt {
                        display: none;
                    }
                    #checkt:checked~label .kai::after {
                        display: block;
                    }
                }
                .dog {
                    position: relative;
                    img:nth-child(1) {
                        position: absolute;
                        right: p(80);
                        width: p(83);
                        z-index: 2;
                    }
                    img:nth-child(2) {
                        position: absolute;
                        right: p(80);
                        width: p(65);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 800ms;
                        animation-duration: 1.2s;
                        animation-iteration-count: infinite;
                    }
                    @keyframes yuefu {
                        0% {
                            transform: translateY(p(-30));
                        }
                       
                        100% {
                            transform: translateY(p(-600));
                            opacity: 0;
                        }
                    }
                    img:nth-child(3) {
                        position: absolute;
                        right: p(80);
                        width: p(69);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(4) {
                        position: absolute;
                        right: p(80);
                        width: p(75);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.2s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(5) {
                        position: absolute;
                        right: p(80);
                        width: p(74);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.4s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(6) {
                        position: absolute;
                        right: p(65);
                        width: p(104);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.6s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                }
            }
            //第三题
            .yezi {
                background: url(../img/haoyou-3.png) no-repeat;
                background-size: cover;
                overflow: hidden;
                h1{
                    width: p(526);
                    font-size: p(32);
                    color: white;
                    font-weight: normal;
                   margin: auto;
                    margin-top: p(104);
                }
                .hul{
                    margin: auto;
                    margin-top: p(80);
                    width: p(212);
                    height: p(234);
                    overflow: hidden;
                    position: relative;
                    z-index: 1;
                    img{
                        width: 100%;
                    }
                }
                .xy{
                    position: relative;
                    top: p(-180);
                    text-align: center;
                    img:nth-child(1) {
                        position: absolute;
                        top: p(100);
                        left: p(100);
                        width: p(112);
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 4s;
                        animation-iteration-count: infinite;
                    }
                    @keyframes hy {
                        0% {
                            transform: translateX(0);
                        }
                        20% {
                            transform: translateX(p(-80));
                        }
                        40% {
                            transform: translateX(p(-120));
                        }
                        60% {
                            transform: translateX(p(-160));
                        }
                        80% {
                            transform: translateX(p(-200));
                        }
                        90% {
                            transform: translateX(p(-200));
                        }
                        100% {
                            transform: translateX(p(-240));
                            opacity: 0;
                        }
                    }
                    img:nth-child(2) {
                        width: p(112);
                        margin-right: p(80);
                        margin-left: p(66);
                        position: absolute;
                        top: 0;
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 5s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(3) {
                        width: p(64);
                        margin-right: p(68);
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 6s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(4) {
                        width: p(63);
                        position: absolute;
                        right: 0;
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 7s;
                        animation-iteration-count: infinite;
                    }
                
                }
               .dong{
                    .wangt {
                        height: p(63);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "A   《Yogurt》";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .qiangt {
                        height: p(63);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        margin-top: p(29);
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "B   《Salt》";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .yuant {
                        height: p(63);
                        margin-top: p(29);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "C   《Sugar》";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/neiye-2.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .kait {
                        height: p(63);
                        margin-top: p(29);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "D   《Salad》";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    #chect {
                        display: none;
                    }
                    #chect:checked~label .qiangt::after {
                        display: block;
                    }
                    #checktt {
                        display: none;
                    }
                    #checktt:checked~label .wangt::after {
                        display: block;
                    }
                    #chet{
                        display: none;
                    }
                    #chet:checked~label .yuant::after {
                        display: block;
                    }
                    #checkty {
                        display: none;
                    }
                    #checkty:checked~label .kait::after {
                        display: block;
                    }
                
               }
               .dog{
                   
                    position: relative;
                    img:nth-child(1) {
                        position: absolute;
                        right: p(80);
                        width: p(83);
                        z-index: 2;
                    }
                    img:nth-child(2) {
                        position: absolute;
                        right: p(80);
                        width: p(65);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 800ms;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    @keyframes yuefu {
                        0% {
                            transform: translateY(p(-30));
                        }
                        10% {
                            transform: translateY(p(-60));
                        }
                        20% {
                            transform: translateY(p(-90));
                        }
                        30% {
                            transform: translateY(p(-120));
                        }
                        40% {
                            transform: translateY(p(-150));
                        }
                        50% {
                            transform: translateY(p(-180));
                        }
                        60% {
                            transform: translateY(p(-210));
                            opacity: 0.8;
                        }
                        70% {
                            transform: translateY(p(-240));
                            opacity: 0.6;
                        }
                        80% {
                            transform: translateY(p(-270));
                            opacity: 0.4;
                        }
                        90% {
                            transform: translateY(p(-300));
                            opacity: 0.2;
                        }
                        100% {
                            transform: translateY(p(-320));
                            opacity: 0;
                        }
                    }
                    img:nth-child(3) {
                        position: absolute;
                        right: p(80);
                        width: p(69);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(4) {
                        position: absolute;
                        right: p(80);
                        width: p(75);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.2s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(5) {
                        position: absolute;
                        right: p(80);
                        width: p(74);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.5s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(6) {
                        position: absolute;
                        right: p(65);
                        width: p(104);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.6s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                
               }
            }
            //第四题
            .pou{
                position: relative;
                background: url(../img/haoyou-3.png) no-repeat;
                background-size: cover;
                overflow: hidden;
                h1{
                    width: p(526);
                    font-size: p(32);
                    color: white;
                    font-weight: normal;
                   margin: auto;
                    margin-top: p(104);
                }
                .hul{
                    margin: auto;
                    margin-top: p(80);
                    width: p(212);
                    height: p(234);
                    overflow: hidden;
                    position: relative;
                    z-index: 1;
                    img{
                        width: 100%;
                      vertical-align: top;
                    }
                }
                .yf{
                    width: p(45);
                    height: p(50);
                    overflow: hidden;
                    position: absolute;
                    top: p(200);
                    right: p(246);
                    img{
                        vertical-align: top;
                        width: 100%;
                    }
                }
                .xy{
                    position: relative;
                    top: p(-180);
                    text-align: center;
                    img:nth-child(1) {
                        position: absolute;
                        top: p(100);
                        left: p(100);
                        width: p(112);
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 4s;
                        animation-iteration-count: infinite;
                    }
                    @keyframes hy {
                        0% {
                            transform: translateX(0);
                        }
                        20% {
                            transform: translateX(p(-80));
                        }
                        40% {
                            transform: translateX(p(-120));
                        }
                        60% {
                            transform: translateX(p(-160));
                        }
                        80% {
                            transform: translateX(p(-200));
                        }
                        90% {
                            transform: translateX(p(-200));
                        }
                        100% {
                            transform: translateX(p(-240));
                            opacity: 0;
                        }
                    }
                    img:nth-child(2) {
                        width: p(112);
                        margin-right: p(80);
                        margin-left: p(66);
                        position: absolute;
                        top: 0;
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 5s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(3) {
                        width: p(64);
                        margin-right: p(68);
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 6s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(4) {
                        width: p(63);
                        position: absolute;
                        right: 0;
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 7s;
                        animation-iteration-count: infinite;
                    }
                
                }
               .dong{
                    .wangt {
                        height: p(63);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "A   《新白娘子传奇》";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .qiangt {
                        height: p(63);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        margin-top: p(29);
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "B   《当》";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/neiye-2.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .yuant {
                        height: p(63);
                        margin-top: p(29);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "C   《忐忑》";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .kait {
                        height: p(63);
                        margin-top: p(29);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(20);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "D   《Concerto Pour Deux Voix》";
                            font-size: p(20);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    #t {
                        display: none;
                    }
                    #t:checked~label .qiangt::after {
                        display: block;
                    }
                    #x {
                        display: none;
                    }
                    #x:checked~label .wangt::after {
                        display: block;
                    }
                    #y{
                        display: none;
                    }
                    #y:checked~label .yuant::after {
                        display: block;
                    }
                    #o {
                        display: none;
                    }
                    #o:checked~label .kait::after {
                        display: block;
                    }
                
               }
               .dog{
                   
                    position: relative;
                    img:nth-child(1) {
                        position: absolute;
                        right: p(80);
                        width: p(83);
                        z-index: 2;
                    }
                    img:nth-child(2) {
                        position: absolute;
                        right: p(80);
                        width: p(65);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 800ms;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    @keyframes yuefu {
                        0% {
                            transform: translateY(p(-30));
                        }
                        10% {
                            transform: translateY(p(-60));
                        }
                        20% {
                            transform: translateY(p(-90));
                        }
                        30% {
                            transform: translateY(p(-120));
                        }
                        40% {
                            transform: translateY(p(-150));
                        }
                        50% {
                            transform: translateY(p(-180));
                        }
                        60% {
                            transform: translateY(p(-210));
                            opacity: 0.8;
                        }
                        70% {
                            transform: translateY(p(-240));
                            opacity: 0.6;
                        }
                        80% {
                            transform: translateY(p(-270));
                            opacity: 0.4;
                        }
                        90% {
                            transform: translateY(p(-300));
                            opacity: 0.2;
                        }
                        100% {
                            transform: translateY(p(-320));
                            opacity: 0;
                        }
                    }
                    img:nth-child(3) {
                        position: absolute;
                        right: p(80);
                        width: p(69);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(4) {
                        position: absolute;
                        right: p(80);
                        width: p(75);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.2s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(5) {
                        position: absolute;
                        right: p(80);
                        width: p(74);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.5s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(6) {
                        position: absolute;
                        right: p(65);
                        width: p(104);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.6s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                
               }
            
            }
            //第五题
            .feng{
                background: url(../img/haoyou-3.png) no-repeat;
                background-size: cover;
                overflow: hidden;
                h1{
                    width: p(526);
                    font-size: p(32);
                    color: white;
                    font-weight: normal;
                   margin: auto;
                    margin-top: p(104);
                }
                .hul{
                    margin: auto;
                    margin-top: p(80);
                    width: p(212);
                    height: p(234);
                    overflow: hidden;
                    position: relative;
                    z-index: 1;
                    img{
                        width: 100%;
                    }
                }
                .xy{
                    position: relative;
                    top: p(-180);
                    text-align: center;
                    img:nth-child(1) {
                        position: absolute;
                        top: p(100);
                        left: p(100);
                        width: p(112);
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 4s;
                        animation-iteration-count: infinite;
                    }
                    @keyframes hy {
                        0% {
                            transform: translateX(0);
                        }
                        20% {
                            transform: translateX(p(-80));
                        }
                        40% {
                            transform: translateX(p(-120));
                        }
                        60% {
                            transform: translateX(p(-160));
                        }
                        80% {
                            transform: translateX(p(-200));
                        }
                        90% {
                            transform: translateX(p(-200));
                        }
                        100% {
                            transform: translateX(p(-240));
                            opacity: 0;
                        }
                    }
                    img:nth-child(2) {
                        width: p(112);
                        margin-right: p(80);
                        margin-left: p(66);
                        position: absolute;
                        top: 0;
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 5s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(3) {
                        width: p(64);
                        margin-right: p(68);
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 6s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(4) {
                        width: p(63);
                        position: absolute;
                        right: 0;
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 7s;
                        animation-iteration-count: infinite;
                    }
                
                }
               .dong{
                    .wangt {
                        height: p(63);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "A   第4个";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .qiangt {
                        height: p(63);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        margin-top: p(29);
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "B   第6个";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .yuant {
                        height: p(63);
                        margin-top: p(29);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "C   第8个";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/neiye-2.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .kait {
                        height: p(63);
                        margin-top: p(29);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "D   第10个";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    #s {
                        display: none;
                    }
                    #s:checked~label .qiangt::after {
                        display: block;
                    }
                    #d {
                        display: none;
                    }
                    #d:checked~label .wangt::after {
                        display: block;
                    }
                    #b{
                        display: none;
                    }
                    #b:checked~label .yuant::after {
                        display: block;
                    }
                    #h {
                        display: none;
                    }
                    #h:checked~label .kait::after {
                        display: block;
                    }
                
               }
               .dog{
                   
                    position: relative;
                    img:nth-child(1) {
                        position: absolute;
                        right: p(80);
                        width: p(83);
                        z-index: 2;
                    }
                    img:nth-child(2) {
                        position: absolute;
                        right: p(80);
                        width: p(65);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 800ms;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    @keyframes yuefu {
                        0% {
                            transform: translateY(p(-30));
                        }
                        10% {
                            transform: translateY(p(-60));
                        }
                        20% {
                            transform: translateY(p(-90));
                        }
                        30% {
                            transform: translateY(p(-120));
                        }
                        40% {
                            transform: translateY(p(-150));
                        }
                        50% {
                            transform: translateY(p(-180));
                        }
                        60% {
                            transform: translateY(p(-210));
                            opacity: 0.8;
                        }
                        70% {
                            transform: translateY(p(-240));
                            opacity: 0.6;
                        }
                        80% {
                            transform: translateY(p(-270));
                            opacity: 0.4;
                        }
                        90% {
                            transform: translateY(p(-300));
                            opacity: 0.2;
                        }
                        100% {
                            transform: translateY(p(-320));
                            opacity: 0;
                        }
                    }
                    img:nth-child(3) {
                        position: absolute;
                        right: p(80);
                        width: p(69);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(4) {
                        position: absolute;
                        right: p(80);
                        width: p(75);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.2s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(5) {
                        position: absolute;
                        right: p(80);
                        width: p(74);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.5s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(6) {
                        position: absolute;
                        right: p(65);
                        width: p(104);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.6s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                
               }
            
            }
            //第六题
            .qiyi{
                position: relative;
                background: url(../img/haoyou-3.png) no-repeat;
                background-size: cover;
                overflow: hidden;
                h1{
                    width: p(526);
                    font-size: p(32);
                    color: white;
                    font-weight: normal;
                   margin: auto;
                    margin-top: p(104);
                }
                .hul{
                    margin: auto;
                    margin-top: p(80);
                    width: p(212);
                    height: p(234);
                    overflow: hidden;
                    position: relative;
                    z-index: 1;
                    img{
                        width: 100%;
                      vertical-align: top;
                    }
                }
                .yf{
                    width: p(45);
                    height: p(50);
                    overflow: hidden;
                    position: absolute;
                    top: p(200);
                    right: p(246);
                    img{
                        vertical-align: top;
                        width: 100%;
                    }
                }
                .xy{
                    position: relative;
                    top: p(-180);
                    text-align: center;
                    img:nth-child(1) {
                        position: absolute;
                        top: p(100);
                        left: p(100);
                        width: p(112);
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 4s;
                        animation-iteration-count: infinite;
                    }
                    @keyframes hy {
                        0% {
                            transform: translateX(0);
                        }
                        20% {
                            transform: translateX(p(-80));
                        }
                        40% {
                            transform: translateX(p(-120));
                        }
                        60% {
                            transform: translateX(p(-160));
                        }
                        80% {
                            transform: translateX(p(-200));
                        }
                        90% {
                            transform: translateX(p(-200));
                        }
                        100% {
                            transform: translateX(p(-240));
                            opacity: 0;
                        }
                    }
                    img:nth-child(2) {
                        width: p(112);
                        margin-right: p(80);
                        margin-left: p(66);
                        position: absolute;
                        top: 0;
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 5s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(3) {
                        width: p(64);
                        margin-right: p(68);
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 6s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(4) {
                        width: p(63);
                        position: absolute;
                        right: 0;
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 7s;
                        animation-iteration-count: infinite;
                    }
                
                }
               .dong{
                    .wangt {
                        height: p(63);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "A   是";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .qiangt {
                        height: p(63);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        margin-top: p(29);
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "B   不是";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/neiye-2.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .yuant {
                        height: p(63);
                        margin-top: p(29);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "C   不知道";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .kait {
                        height: p(63);
                        margin-top: p(29);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "D   你不知道我也不会帮你的";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    #bushi {
                        display: none;
                    }
                    #bushi:checked~label .qiangt::after {
                        display: block;
                    }
                    #shi{
                        display: none;
                    }
                    #shi:checked~label .wangt::after {
                        display: block;
                    }
                    #zhi{
                        display: none;
                    }
                    #zhi:checked~label .yuant::after {
                        display: block;
                    }
                    #wo {
                        display: none;
                    }
                    #wo:checked~label .kait::after {
                        display: block;
                    }
                
               }
               .dog{
                   
                    position: relative;
                    img:nth-child(1) {
                        position: absolute;
                        right: p(80);
                        width: p(83);
                        z-index: 2;
                    }
                    img:nth-child(2) {
                        position: absolute;
                        right: p(80);
                        width: p(65);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 800ms;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    @keyframes yuefu {
                        0% {
                            transform: translateY(p(-30));
                        }
                        10% {
                            transform: translateY(p(-60));
                        }
                        20% {
                            transform: translateY(p(-90));
                        }
                        30% {
                            transform: translateY(p(-120));
                        }
                        40% {
                            transform: translateY(p(-150));
                        }
                        50% {
                            transform: translateY(p(-180));
                        }
                        60% {
                            transform: translateY(p(-210));
                            opacity: 0.8;
                        }
                        70% {
                            transform: translateY(p(-240));
                            opacity: 0.6;
                        }
                        80% {
                            transform: translateY(p(-270));
                            opacity: 0.4;
                        }
                        90% {
                            transform: translateY(p(-300));
                            opacity: 0.2;
                        }
                        100% {
                            transform: translateY(p(-320));
                            opacity: 0;
                        }
                    }
                    img:nth-child(3) {
                        position: absolute;
                        right: p(80);
                        width: p(69);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(4) {
                        position: absolute;
                        right: p(80);
                        width: p(75);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.2s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(5) {
                        position: absolute;
                        right: p(80);
                        width: p(74);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.5s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(6) {
                        position: absolute;
                        right: p(65);
                        width: p(104);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.6s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                
               }
            
            
            }
            //第七题
            .hanguo{
                position: relative;
                background: url(../img/haoyou-3.png) no-repeat;
                background-size: cover;
                overflow: hidden;
                h1{
                    width: p(526);
                    font-size: p(32);
                    color: white;
                    font-weight: normal;
                   margin: auto;
                    margin-top: p(104);
                }
                .hul{
                    margin: auto;
                    margin-top: p(80);
                    width: p(345);
                    height: p(193);
                    overflow: hidden;
                    position: relative;
                    z-index: 1;
                    img{
                        width: 100%;
                      vertical-align: top;
                    }
                }
                .yf{
                    width: p(45);
                    height: p(50);
                    overflow: hidden;
                    position: absolute;
                    top: p(200);
                    right: p(246);
                    img{
                        vertical-align: top;
                        width: 100%;
                    }
                }
                .xy{
                    position: relative;
                    top: p(-180);
                    text-align: center;
                    img:nth-child(1) {
                        position: absolute;
                        top: p(100);
                        left: p(100);
                        width: p(112);
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 4s;
                        animation-iteration-count: infinite;
                    }
                    @keyframes hy {
                        0% {
                            transform: translateX(0);
                        }
                        20% {
                            transform: translateX(p(-80));
                        }
                        40% {
                            transform: translateX(p(-120));
                        }
                        60% {
                            transform: translateX(p(-160));
                        }
                        80% {
                            transform: translateX(p(-200));
                        }
                        90% {
                            transform: translateX(p(-200));
                        }
                        100% {
                            transform: translateX(p(-240));
                            opacity: 0;
                        }
                    }
                    img:nth-child(2) {
                        width: p(112);
                        margin-right: p(80);
                        margin-left: p(66);
                        position: absolute;
                        top: 0;
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 5s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(3) {
                        width: p(64);
                        margin-right: p(68);
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 6s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(4) {
                        width: p(63);
                        position: absolute;
                        right: 0;
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 7s;
                        animation-iteration-count: infinite;
                    }
                
                }
               .dong{
                    .wangt {
                        height: p(63);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "A   CN Blue";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/neiye-2.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .qiangt {
                        height: p(63);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        margin-top: p(29);
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "B   Big Bang";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .yuant {
                        height: p(63);
                        margin-top: p(29);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "C   F.T. Island";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .kait {
                        height: p(63);
                        margin-top: p(29);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "D   Infinite";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    #Big {
                        display: none;
                    }
                    #Big:checked~label .qiangt::after {
                        display: block;
                    }
                    #CN{
                        display: none;
                    }
                    #CN:checked~label .wangt::after {
                        display: block;
                    }
                    #Island{
                        display: none;
                    }
                    #Island:checked~label .yuant::after {
                        display: block;
                    }
                    #Infinite {
                        display: none;
                    }
                    #Infinite:checked~label .kait::after {
                        display: block;
                    }
                
               }
               .dog{
                   
                    position: relative;
                    img:nth-child(1) {
                        position: absolute;
                        right: p(80);
                        width: p(83);
                        z-index: 2;
                    }
                    img:nth-child(2) {
                        position: absolute;
                        right: p(80);
                        width: p(65);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 800ms;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    @keyframes yuefu {
                        0% {
                            transform: translateY(p(-30));
                        }
                        10% {
                            transform: translateY(p(-60));
                        }
                        20% {
                            transform: translateY(p(-90));
                        }
                        30% {
                            transform: translateY(p(-120));
                        }
                        40% {
                            transform: translateY(p(-150));
                        }
                        50% {
                            transform: translateY(p(-180));
                        }
                        60% {
                            transform: translateY(p(-210));
                            opacity: 0.8;
                        }
                        70% {
                            transform: translateY(p(-240));
                            opacity: 0.6;
                        }
                        80% {
                            transform: translateY(p(-270));
                            opacity: 0.4;
                        }
                        90% {
                            transform: translateY(p(-300));
                            opacity: 0.2;
                        }
                        100% {
                            transform: translateY(p(-320));
                            opacity: 0;
                        }
                    }
                    img:nth-child(3) {
                        position: absolute;
                        right: p(80);
                        width: p(69);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(4) {
                        position: absolute;
                        right: p(80);
                        width: p(75);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.2s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(5) {
                        position: absolute;
                        right: p(80);
                        width: p(74);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.5s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(6) {
                        position: absolute;
                        right: p(65);
                        width: p(104);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.6s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                
               }
            
            
            
            }
            //第八题
            .kuaizi{
                position: relative;
                background: url(../img/haoyou-3.png) no-repeat;
                background-size: cover;
                overflow: hidden;
                h1{
                    width: p(526);
                    font-size: p(32);
                    color: white;
                    font-weight: normal;
                   margin: auto;
                    margin-top: p(104);
                }
                .hul{
                    margin: auto;
                    margin-top: p(80);
                    width: p(359);
                    height: p(260);
                    overflow: hidden;
                    position: relative;
                    z-index: 1;
                    img{
                        width: 100%;
                      vertical-align: top;
                    }
                }
                .yf{
                    width: p(45);
                    height: p(50);
                    overflow: hidden;
                    position: absolute;
                    top: p(200);
                    right: p(246);
                    img{
                        vertical-align: top;
                        width: 100%;
                    }
                }
                .xy{
                    position: relative;
                    top: p(-180);
                    text-align: center;
                    img:nth-child(1) {
                        position: absolute;
                        top: p(100);
                        left: p(100);
                        width: p(112);
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 4s;
                        animation-iteration-count: infinite;
                    }
                    @keyframes hy {
                        0% {
                            transform: translateX(0);
                        }
                        20% {
                            transform: translateX(p(-80));
                        }
                        40% {
                            transform: translateX(p(-120));
                        }
                        60% {
                            transform: translateX(p(-160));
                        }
                        80% {
                            transform: translateX(p(-200));
                        }
                        90% {
                            transform: translateX(p(-200));
                        }
                        100% {
                            transform: translateX(p(-240));
                            opacity: 0;
                        }
                    }
                    img:nth-child(2) {
                        width: p(112);
                        margin-right: p(80);
                        margin-left: p(66);
                        position: absolute;
                        top: 0;
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 5s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(3) {
                        width: p(64);
                        margin-right: p(68);
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 6s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(4) {
                        width: p(63);
                        position: absolute;
                        right: 0;
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 7s;
                        animation-iteration-count: infinite;
                    }
                
                }
               .dong{
                    .wangt {
                        height: p(63);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "A   《老男孩》";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .qiangt {
                        height: p(63);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        margin-top: p(29);
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "B   《小苹果》";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .yuant {
                        height: p(63);
                        margin-top: p(29);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "C   《父亲》";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .kait {
                        height: p(63);
                        margin-top: p(29);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "D   《小水果》";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/neiye-2.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    #guo {
                        display: none;
                    }
                    #guo:checked~label .qiangt::after {
                        display: block;
                    }
                    #lao{
                        display: none;
                    }
                    #lao:checked~label .wangt::after {
                        display: block;
                    }
                    #fu{
                        display: none;
                    }
                    #fu:checked~label .yuant::after {
                        display: block;
                    }
                    #shui {
                        display: none;
                    }
                    #shui:checked~label .kait::after {
                        display: block;
                    }
                
               }
               .dog{
                   
                    position: relative;
                    img:nth-child(1) {
                        position: absolute;
                        right: p(80);
                        width: p(83);
                        z-index: 2;
                    }
                    img:nth-child(2) {
                        position: absolute;
                        right: p(80);
                        width: p(65);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 800ms;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    @keyframes yuefu {
                        0% {
                            transform: translateY(p(-30));
                        }
                        10% {
                            transform: translateY(p(-60));
                        }
                        20% {
                            transform: translateY(p(-90));
                        }
                        30% {
                            transform: translateY(p(-120));
                        }
                        40% {
                            transform: translateY(p(-150));
                        }
                        50% {
                            transform: translateY(p(-180));
                        }
                        60% {
                            transform: translateY(p(-210));
                            opacity: 0.8;
                        }
                        70% {
                            transform: translateY(p(-240));
                            opacity: 0.6;
                        }
                        80% {
                            transform: translateY(p(-270));
                            opacity: 0.4;
                        }
                        90% {
                            transform: translateY(p(-300));
                            opacity: 0.2;
                        }
                        100% {
                            transform: translateY(p(-320));
                            opacity: 0;
                        }
                    }
                    img:nth-child(3) {
                        position: absolute;
                        right: p(80);
                        width: p(69);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(4) {
                        position: absolute;
                        right: p(80);
                        width: p(75);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.2s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(5) {
                        position: absolute;
                        right: p(80);
                        width: p(74);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.5s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(6) {
                        position: absolute;
                        right: p(65);
                        width: p(104);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.6s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
               }
            }
            //第九题
            .jie{
                
                position: relative;
                background: url(../img/haoyou-3.png) no-repeat;
                background-size: cover;
                overflow: hidden;
                h1{
                    width: p(526);
                    font-size: p(32);
                    color: white;
                    font-weight: normal;
                   margin: auto;
                    margin-top: p(104);
                }
                .hul{
                    margin: auto;
                    margin-top: p(80);
                    width: p(212);
                    height: p(234);
                    overflow: hidden;
                    position: relative;
                    z-index: 1;
                    img{
                        width: 100%;
                      vertical-align: top;
                    }
                }
                .yf{
                    width: p(45);
                    height: p(50);
                    overflow: hidden;
                    position: absolute;
                    top: p(200);
                    right: p(246);
                    img{
                        vertical-align: top;
                        width: 100%;
                    }
                }
                .xy{
                    position: relative;
                    top: p(-180);
                    text-align: center;
                    img:nth-child(1) {
                        position: absolute;
                        top: p(100);
                        left: p(100);
                        width: p(112);
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 4s;
                        animation-iteration-count: infinite;
                    }
                    @keyframes hy {
                        0% {
                            transform: translateX(0);
                        }
                        20% {
                            transform: translateX(p(-80));
                        }
                        40% {
                            transform: translateX(p(-120));
                        }
                        60% {
                            transform: translateX(p(-160));
                        }
                        80% {
                            transform: translateX(p(-200));
                        }
                        90% {
                            transform: translateX(p(-200));
                        }
                        100% {
                            transform: translateX(p(-240));
                            opacity: 0;
                        }
                    }
                    img:nth-child(2) {
                        width: p(112);
                        margin-right: p(80);
                        margin-left: p(66);
                        position: absolute;
                        top: 0;
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 5s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(3) {
                        width: p(64);
                        margin-right: p(68);
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 6s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(4) {
                        width: p(63);
                        position: absolute;
                        right: 0;
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 7s;
                        animation-iteration-count: infinite;
                    }
                
                }
               .dong{
                    .wangt {
                        height: p(63);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "A   《这，就是爱》";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .qiangt {
                        height: p(63);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        margin-top: p(29);
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "B   《无情的情书》";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/neiye-2.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .yuant {
                        height: p(63);
                        margin-top: p(29);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "C   《明天过后》";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .kait {
                        height: p(63);
                        margin-top: p(29);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "D   《逆战》";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    #shu {
                        display: none;
                    }
                    #shu:checked~label .qiangt::after {
                        display: block;
                    }
                    #ai{
                        display: none;
                    }
                    #ai:checked~label .wangt::after {
                        display: block;
                    }
                    #ming{
                        display: none;
                    }
                    #ming:checked~label .yuant::after {
                        display: block;
                    }
                    #nie {
                        display: none;
                    }
                    #nie:checked~label .kait::after {
                        display: block;
                    }
                
               }
               .dog{
                   
                    position: relative;
                    img:nth-child(1) {
                        position: absolute;
                        right: p(80);
                        width: p(83);
                        z-index: 2;
                    }
                    img:nth-child(2) {
                        position: absolute;
                        right: p(80);
                        width: p(65);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 800ms;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    @keyframes yuefu {
                        0% {
                            transform: translateY(p(-30));
                        }
                        10% {
                            transform: translateY(p(-60));
                        }
                        20% {
                            transform: translateY(p(-90));
                        }
                        30% {
                            transform: translateY(p(-120));
                        }
                        40% {
                            transform: translateY(p(-150));
                        }
                        50% {
                            transform: translateY(p(-180));
                        }
                        60% {
                            transform: translateY(p(-210));
                            opacity: 0.8;
                        }
                        70% {
                            transform: translateY(p(-240));
                            opacity: 0.6;
                        }
                        80% {
                            transform: translateY(p(-270));
                            opacity: 0.4;
                        }
                        90% {
                            transform: translateY(p(-300));
                            opacity: 0.2;
                        }
                        100% {
                            transform: translateY(p(-320));
                            opacity: 0;
                        }
                    }
                    img:nth-child(3) {
                        position: absolute;
                        right: p(80);
                        width: p(69);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(4) {
                        position: absolute;
                        right: p(80);
                        width: p(75);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.2s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(5) {
                        position: absolute;
                        right: p(80);
                        width: p(74);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.5s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(6) {
                        position: absolute;
                        right: p(65);
                        width: p(104);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.6s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                
               }
            
            }
            //第十题
            .all{
                
                background: url(../img/haoyou-3.png) no-repeat;
                background-size: cover;
                overflow: hidden;
                h1{
                    width: p(526);
                    font-size: p(32);
                    color: white;
                    font-weight: normal;
                   margin: auto;
                    margin-top: p(104);
                }
                .hul{
                    margin: auto;
                    margin-top: p(80);
                    width: p(250);
                    height: p(350);
                    overflow: hidden;
                    position: relative;
                    z-index: 1;
                    img{
                        width: 100%;
                    }
                }
                .xy{
                    position: relative;
                    top: p(-180);
                    text-align: center;
                    img:nth-child(1) {
                        position: absolute;
                        top: p(100);
                        left: p(100);
                        width: p(112);
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 4s;
                        animation-iteration-count: infinite;
                    }
                    @keyframes hy {
                        0% {
                            transform: translateX(0);
                        }
                        20% {
                            transform: translateX(p(-80));
                        }
                        40% {
                            transform: translateX(p(-120));
                        }
                        60% {
                            transform: translateX(p(-160));
                        }
                        80% {
                            transform: translateX(p(-200));
                        }
                        90% {
                            transform: translateX(p(-200));
                        }
                        100% {
                            transform: translateX(p(-240));
                            opacity: 0;
                        }
                    }
                    img:nth-child(2) {
                        width: p(112);
                        margin-right: p(80);
                        margin-left: p(66);
                        position: absolute;
                        top: 0;
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 5s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(3) {
                        width: p(64);
                        margin-right: p(68);
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 6s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(4) {
                        width: p(63);
                        position: absolute;
                        right: 0;
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 7s;
                        animation-iteration-count: infinite;
                    }
                
                }
               .dong{
                    .wangt {
                        height: p(63);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "A   《19》";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .qiangt {
                        height: p(63);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        margin-top: p(29);
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "B   《21》";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .yuant {
                        height: p(63);
                        margin-top: p(29);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "C   《25》";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/neiye-2.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .kait {
                        height: p(63);
                        margin-top: p(29);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "D   《26》";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    #e{
                        display: none;
                    }
                    #e:checked~label .qiangt::after {
                        display: block;
                    }
                    #jl{
                        display: none;
                    }
                    #jl:checked~label .wangt::after {
                        display: block;
                    }
                    #w{
                        display: none;
                    }
                    #w:checked~label .yuant::after {
                        display: block;
                    }
                    #lio {
                        display: none;
                    }
                    #lio:checked~label .kait::after {
                        display: block;
                    }
                
               }
               .dog{
                   
                    position: relative;
                    img:nth-child(1) {
                        position: absolute;
                        right: p(80);
                        width: p(83);
                        z-index: 2;
                    }
                    img:nth-child(2) {
                        position: absolute;
                        right: p(80);
                        width: p(65);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 800ms;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    @keyframes yuefu {
                        0% {
                            transform: translateY(p(-30));
                        }
                        10% {
                            transform: translateY(p(-60));
                        }
                        20% {
                            transform: translateY(p(-90));
                        }
                        30% {
                            transform: translateY(p(-120));
                        }
                        40% {
                            transform: translateY(p(-150));
                        }
                        50% {
                            transform: translateY(p(-180));
                        }
                        60% {
                            transform: translateY(p(-210));
                            opacity: 0.8;
                        }
                        70% {
                            transform: translateY(p(-240));
                            opacity: 0.6;
                        }
                        80% {
                            transform: translateY(p(-270));
                            opacity: 0.4;
                        }
                        90% {
                            transform: translateY(p(-300));
                            opacity: 0.2;
                        }
                        100% {
                            transform: translateY(p(-320));
                            opacity: 0;
                        }
                    }
                    img:nth-child(3) {
                        position: absolute;
                        right: p(80);
                        width: p(69);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(4) {
                        position: absolute;
                        right: p(80);
                        width: p(75);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.2s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(5) {
                        position: absolute;
                        right: p(80);
                        width: p(74);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.5s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(6) {
                        position: absolute;
                        right: p(65);
                        width: p(104);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.6s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                
               }
            
            
            }
            //第十一题
            .eco{
                position: relative;
                background: url(../img/haoyou-3.png) no-repeat;
                background-size: cover;
                overflow: hidden;
                h1{
                    width: p(526);
                    font-size: p(32);
                    color: white;
                    font-weight: normal;
                   margin: auto;
                    margin-top: p(104);
                }
                .hul{
                    margin: auto;
                    margin-top: p(80);
                    width: p(250);
                    height: p(350);
                    overflow: hidden;
                    position: relative;
                    z-index: 1;
                    img{
                        width: 100%;
                      vertical-align: top;
                    }
                }
                .yf{
                    width: p(45);
                    height: p(50);
                    overflow: hidden;
                    position: absolute;
                    top: p(200);
                    right: p(246);
                    img{
                        vertical-align: top;
                        width: 100%;
                    }
                }
                .xy{
                    position: relative;
                    top: p(-180);
                    text-align: center;
                    img:nth-child(1) {
                        position: absolute;
                        top: p(100);
                        left: p(100);
                        width: p(112);
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 4s;
                        animation-iteration-count: infinite;
                    }
                    @keyframes hy {
                        0% {
                            transform: translateX(0);
                        }
                        20% {
                            transform: translateX(p(-80));
                        }
                        40% {
                            transform: translateX(p(-120));
                        }
                        60% {
                            transform: translateX(p(-160));
                        }
                        80% {
                            transform: translateX(p(-200));
                        }
                        90% {
                            transform: translateX(p(-200));
                        }
                        100% {
                            transform: translateX(p(-240));
                            opacity: 0;
                        }
                    }
                    img:nth-child(2) {
                        width: p(112);
                        margin-right: p(80);
                        margin-left: p(66);
                        position: absolute;
                        top: 0;
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 5s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(3) {
                        width: p(64);
                        margin-right: p(68);
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 6s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(4) {
                        width: p(63);
                        position: absolute;
                        right: 0;
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 7s;
                        animation-iteration-count: infinite;
                    }
                
                }
               .dong{
                    .wangt {
                        height: p(63);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "A   吴亦凡";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .qiangt {
                        height: p(63);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        margin-top: p(29);
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "B   黄子韬";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/neiye-2.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .yuant {
                        height: p(63);
                        margin-top: p(29);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "C   鹿晗";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .kait {
                        height: p(63);
                        margin-top: p(29);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "D   张艺兴";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    #shut {
                        display: none;
                    }
                    #shut:checked~label .qiangt::after {
                        display: block;
                    }
                    #ait{
                        display: none;
                    }
                    #ait:checked~label .wangt::after {
                        display: block;
                    }
                    #mingt{
                        display: none;
                    }
                    #mingt:checked~label .yuant::after {
                        display: block;
                    }
                    #niet {
                        display: none;
                    }
                    #niet:checked~label .kait::after {
                        display: block;
                    }
                
               }
               .dog{
                   
                    position: relative;
                    img:nth-child(1) {
                        position: absolute;
                        right: p(80);
                        width: p(83);
                        z-index: 2;
                    }
                    img:nth-child(2) {
                        position: absolute;
                        right: p(80);
                        width: p(65);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 800ms;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    @keyframes yuefu {
                        0% {
                            transform: translateY(p(-30));
                        }
                        10% {
                            transform: translateY(p(-60));
                        }
                        20% {
                            transform: translateY(p(-90));
                        }
                        30% {
                            transform: translateY(p(-120));
                        }
                        40% {
                            transform: translateY(p(-150));
                        }
                        50% {
                            transform: translateY(p(-180));
                        }
                        60% {
                            transform: translateY(p(-210));
                            opacity: 0.8;
                        }
                        70% {
                            transform: translateY(p(-240));
                            opacity: 0.6;
                        }
                        80% {
                            transform: translateY(p(-270));
                            opacity: 0.4;
                        }
                        90% {
                            transform: translateY(p(-300));
                            opacity: 0.2;
                        }
                        100% {
                            transform: translateY(p(-320));
                            opacity: 0;
                        }
                    }
                    img:nth-child(3) {
                        position: absolute;
                        right: p(80);
                        width: p(69);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(4) {
                        position: absolute;
                        right: p(80);
                        width: p(75);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.2s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(5) {
                        position: absolute;
                        right: p(80);
                        width: p(74);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.5s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(6) {
                        position: absolute;
                        right: p(65);
                        width: p(104);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.6s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                
               }
            
            
            }
            //第十二题
            .lihao{
                
                position: relative;
                background: url(../img/haoyou-3.png) no-repeat;
                background-size: cover;
                overflow: hidden;
                h1{
                    width: p(526);
                    font-size: p(32);
                    color: white;
                    font-weight: normal;
                   margin: auto;
                    margin-top: p(104);
                }
                .hul{
                    margin: auto;
                    margin-top: p(80);
                    width: p(250);
                    height: p(350);
                    overflow: hidden;
                    position: relative;
                    z-index: 1;
                    img{
                        width: 100%;
                      vertical-align: top;
                    }
                }
                .yf{
                    width: p(45);
                    height: p(50);
                    overflow: hidden;
                    position: absolute;
                    top: p(200);
                    right: p(246);
                    img{
                        vertical-align: top;
                        width: 100%;
                    }
                }
                .xy{
                    position: relative;
                    top: p(-180);
                    text-align: center;
                    img:nth-child(1) {
                        position: absolute;
                        top: p(100);
                        left: p(100);
                        width: p(112);
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 4s;
                        animation-iteration-count: infinite;
                    }
                    @keyframes hy {
                        0% {
                            transform: translateX(0);
                        }
                        20% {
                            transform: translateX(p(-80));
                        }
                        40% {
                            transform: translateX(p(-120));
                        }
                        60% {
                            transform: translateX(p(-160));
                        }
                        80% {
                            transform: translateX(p(-200));
                        }
                        90% {
                            transform: translateX(p(-200));
                        }
                        100% {
                            transform: translateX(p(-240));
                            opacity: 0;
                        }
                    }
                    img:nth-child(2) {
                        width: p(112);
                        margin-right: p(80);
                        margin-left: p(66);
                        position: absolute;
                        top: 0;
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 5s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(3) {
                        width: p(64);
                        margin-right: p(68);
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 6s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(4) {
                        width: p(63);
                        position: absolute;
                        right: 0;
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 7s;
                        animation-iteration-count: infinite;
                    }
                
                }
               .dong{
                
                    .wangt {
                        height: p(63);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "A   阿SA";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .qiangt {
                        height: p(63);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        margin-top: p(29);
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "B   谭维维";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .yuant {
                        height: p(63);
                        margin-top: p(29);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "C   刘惜君";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .kait {
                        height: p(63);
                        margin-top: p(29);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "D   杨丞琳";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/neiye-2.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    #guott{
                        display: none;
                    }
                    #guott:checked~label .qiangt::after {
                        display: block;
                    }
                    #laott{
                        display: none;
                    }
                    #laott:checked~label .wangt::after {
                        display: block;
                    }
                    #futt{
                        display: none;
                    }
                    #futt:checked~label .yuant::after {
                        display: block;
                    }
                    #shuitt{
                        display: none;
                    }
                    #shuitt:checked~label .kait::after {
                        display: block;
                    }
                
               }
               .dog{
                   
                    position: relative;
                    img:nth-child(1) {
                        position: absolute;
                        right: p(80);
                        width: p(83);
                        z-index: 2;
                    }
                    img:nth-child(2) {
                        position: absolute;
                        right: p(80);
                        width: p(65);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 800ms;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    @keyframes yuefu {
                        0% {
                            transform: translateY(p(-30));
                        }
                        10% {
                            transform: translateY(p(-60));
                        }
                        20% {
                            transform: translateY(p(-90));
                        }
                        30% {
                            transform: translateY(p(-120));
                        }
                        40% {
                            transform: translateY(p(-150));
                        }
                        50% {
                            transform: translateY(p(-180));
                        }
                        60% {
                            transform: translateY(p(-210));
                            opacity: 0.8;
                        }
                        70% {
                            transform: translateY(p(-240));
                            opacity: 0.6;
                        }
                        80% {
                            transform: translateY(p(-270));
                            opacity: 0.4;
                        }
                        90% {
                            transform: translateY(p(-300));
                            opacity: 0.2;
                        }
                        100% {
                            transform: translateY(p(-320));
                            opacity: 0;
                        }
                    }
                    img:nth-child(3) {
                        position: absolute;
                        right: p(80);
                        width: p(69);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(4) {
                        position: absolute;
                        right: p(80);
                        width: p(75);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.2s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(5) {
                        position: absolute;
                        right: p(80);
                        width: p(74);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.5s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(6) {
                        position: absolute;
                        right: p(65);
                        width: p(104);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.6s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
               }
            
            }
            //第十三题
            .yusheng{
                
                position: relative;
                background: url(../img/haoyou-3.png) no-repeat;
                background-size: cover;
                overflow: hidden;
                h1{
                    width: p(526);
                    font-size: p(32);
                    color: white;
                    font-weight: normal;
                   margin: auto;
                    margin-top: p(104);
                }
                .hul{
                    margin: auto;
                    margin-top: p(80);
                    width: p(327);
                    height: p(248);
                    overflow: hidden;
                    position: relative;
                    z-index: 1;
                    img{
                        width: 100%;
                      vertical-align: top;
                    }
                }
                .yf{
                    width: p(45);
                    height: p(50);
                    overflow: hidden;
                    position: absolute;
                    top: p(200);
                    right: p(246);
                    img{
                        vertical-align: top;
                        width: 100%;
                    }
                }
                .xy{
                    position: relative;
                    top: p(-180);
                    text-align: center;
                    img:nth-child(1) {
                        position: absolute;
                        top: p(100);
                        left: p(100);
                        width: p(112);
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 4s;
                        animation-iteration-count: infinite;
                    }
                    @keyframes hy {
                        0% {
                            transform: translateX(0);
                        }
                        20% {
                            transform: translateX(p(-80));
                        }
                        40% {
                            transform: translateX(p(-120));
                        }
                        60% {
                            transform: translateX(p(-160));
                        }
                        80% {
                            transform: translateX(p(-200));
                        }
                        90% {
                            transform: translateX(p(-200));
                        }
                        100% {
                            transform: translateX(p(-240));
                            opacity: 0;
                        }
                    }
                    img:nth-child(2) {
                        width: p(112);
                        margin-right: p(80);
                        margin-left: p(66);
                        position: absolute;
                        top: 0;
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 5s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(3) {
                        width: p(64);
                        margin-right: p(68);
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 6s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(4) {
                        width: p(63);
                        position: absolute;
                        right: 0;
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 7s;
                        animation-iteration-count: infinite;
                    }
                
                }
               .dong{
                    .wangt {
                        height: p(63);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "A   萧敬腾";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/neiye-2.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .qiangt {
                        height: p(63);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        margin-top: p(29);
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "B   曹格";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .yuant {
                        height: p(63);
                        margin-top: p(29);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "C  张雨生";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .kait {
                        height: p(63);
                        margin-top: p(29);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "D   Rain";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    #Bigt{
                        display: none;
                    }
                    #Bigt:checked~label .qiangt::after {
                        display: block;
                    }
                    #CNt{
                        display: none;
                    }
                    #CNt:checked~label .wangt::after {
                        display: block;
                    }
                    #Islandt{
                        display: none;
                    }
                    #Islandt:checked~label .yuant::after {
                        display: block;
                    }
                    #Infinitet{
                        display: none;
                    }
                    #Infinitet:checked~label .kait::after {
                        display: block;
                    }
                
               }
               .dog{
                   
                    position: relative;
                    img:nth-child(1) {
                        position: absolute;
                        right: p(80);
                        width: p(83);
                        z-index: 2;
                    }
                    img:nth-child(2) {
                        position: absolute;
                        right: p(80);
                        width: p(65);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 800ms;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    @keyframes yuefu {
                        0% {
                            transform: translateY(p(-30));
                        }
                        10% {
                            transform: translateY(p(-60));
                        }
                        20% {
                            transform: translateY(p(-90));
                        }
                        30% {
                            transform: translateY(p(-120));
                        }
                        40% {
                            transform: translateY(p(-150));
                        }
                        50% {
                            transform: translateY(p(-180));
                        }
                        60% {
                            transform: translateY(p(-210));
                            opacity: 0.8;
                        }
                        70% {
                            transform: translateY(p(-240));
                            opacity: 0.6;
                        }
                        80% {
                            transform: translateY(p(-270));
                            opacity: 0.4;
                        }
                        90% {
                            transform: translateY(p(-300));
                            opacity: 0.2;
                        }
                        100% {
                            transform: translateY(p(-320));
                            opacity: 0;
                        }
                    }
                    img:nth-child(3) {
                        position: absolute;
                        right: p(80);
                        width: p(69);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(4) {
                        position: absolute;
                        right: p(80);
                        width: p(75);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.2s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(5) {
                        position: absolute;
                        right: p(80);
                        width: p(74);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.5s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(6) {
                        position: absolute;
                        right: p(65);
                        width: p(104);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.6s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                
               }
            
            }
            //第十四题
            .cheng{
                background: url(../img/haoyou-3.png) no-repeat;
                background-size: cover;
                overflow: hidden;
                h1{
                    width: p(526);
                    font-size: p(32);
                    color: white;
                    font-weight: normal;
                   margin: auto;
                    margin-top: p(104);
                }
                .hul{
                    margin: auto;
                    margin-top: p(80);
                    width: p(250);
                    height: p(350);
                    overflow: hidden;
                    position: relative;
                    z-index: 1;
                    img{
                        width: 100%;
                    }
                }
                .xy{
                    position: relative;
                    top: p(-180);
                    text-align: center;
                    img:nth-child(1) {
                        position: absolute;
                        top: p(100);
                        left: p(100);
                        width: p(112);
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 4s;
                        animation-iteration-count: infinite;
                    }
                    @keyframes hy {
                        0% {
                            transform: translateX(0);
                        }
                        20% {
                            transform: translateX(p(-80));
                        }
                        40% {
                            transform: translateX(p(-120));
                        }
                        60% {
                            transform: translateX(p(-160));
                        }
                        80% {
                            transform: translateX(p(-200));
                        }
                        90% {
                            transform: translateX(p(-200));
                        }
                        100% {
                            transform: translateX(p(-240));
                            opacity: 0;
                        }
                    }
                    img:nth-child(2) {
                        width: p(112);
                        margin-right: p(80);
                        margin-left: p(66);
                        position: absolute;
                        top: 0;
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 5s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(3) {
                        width: p(64);
                        margin-right: p(68);
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 6s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(4) {
                        width: p(63);
                        position: absolute;
                        right: 0;
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 7s;
                        animation-iteration-count: infinite;
                    }
                
                }
               .dong{
                    .wangt {
                        height: p(63);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "A   《十年》";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .qiangt {
                        height: p(63);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        margin-top: p(29);
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "B   《好久不见》";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .yuant {
                        height: p(63);
                        margin-top: p(29);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "C   《阴天快乐》";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/neiye-2.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .kait {
                        height: p(63);
                        margin-top: p(29);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "D   《红玫瑰》";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    #jiang{
                        display: none;
                    }
                    #jiang:checked~label .qiangt::after {
                        display: block;
                    }
                    #niang{
                        display: none;
                    }
                    #niang:checked~label .wangt::after {
                        display: block;
                    }
                    #le{
                        display: none;
                    }
                    #le:checked~label .yuant::after {
                        display: block;
                    }
                    #hong{
                        display: none;
                    }
                    #hong:checked~label .kait::after {
                        display: block;
                    }
                
               }
               .dog{
                   
                    position: relative;
                    img:nth-child(1) {
                        position: absolute;
                        right: p(80);
                        width: p(83);
                        z-index: 2;
                    }
                    img:nth-child(2) {
                        position: absolute;
                        right: p(80);
                        width: p(65);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 800ms;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    @keyframes yuefu {
                        0% {
                            transform: translateY(p(-30));
                        }
                        10% {
                            transform: translateY(p(-60));
                        }
                        20% {
                            transform: translateY(p(-90));
                        }
                        30% {
                            transform: translateY(p(-120));
                        }
                        40% {
                            transform: translateY(p(-150));
                        }
                        50% {
                            transform: translateY(p(-180));
                        }
                        60% {
                            transform: translateY(p(-210));
                            opacity: 0.8;
                        }
                        70% {
                            transform: translateY(p(-240));
                            opacity: 0.6;
                        }
                        80% {
                            transform: translateY(p(-270));
                            opacity: 0.4;
                        }
                        90% {
                            transform: translateY(p(-300));
                            opacity: 0.2;
                        }
                        100% {
                            transform: translateY(p(-320));
                            opacity: 0;
                        }
                    }
                    img:nth-child(3) {
                        position: absolute;
                        right: p(80);
                        width: p(69);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(4) {
                        position: absolute;
                        right: p(80);
                        width: p(75);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.2s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(5) {
                        position: absolute;
                        right: p(80);
                        width: p(74);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.5s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(6) {
                        position: absolute;
                        right: p(65);
                        width: p(104);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.6s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                
               }
            
            }
            //第十五题
            .ang{
                position: relative;
                background: url(../img/haoyou-3.png) no-repeat;
                background-size: cover;
                overflow: hidden;
                h1{
                    width: p(526);
                    font-size: p(32);
                    color: white;
                    font-weight: normal;
                   margin: auto;
                    margin-top: p(104);
                }
                .hul{
                    margin: auto;
                    margin-top: p(80);
                    width: p(250);
                    height: p(350);
                    overflow: hidden;
                    position: relative;
                    z-index: 1;
                    img{
                        width: 100%;
                      vertical-align: top;
                    }
                }
                .yf{
                    width: p(45);
                    height: p(50);
                    overflow: hidden;
                    position: absolute;
                    top: p(200);
                    right: p(246);
                    img{
                        vertical-align: top;
                        width: 100%;
                    }
                }
                .xy{
                    position: relative;
                    top: p(-180);
                    text-align: center;
                    img:nth-child(1) {
                        position: absolute;
                        top: p(100);
                        left: p(100);
                        width: p(112);
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 4s;
                        animation-iteration-count: infinite;
                    }
                    @keyframes hy {
                        0% {
                            transform: translateX(0);
                        }
                        20% {
                            transform: translateX(p(-80));
                        }
                        40% {
                            transform: translateX(p(-120));
                        }
                        60% {
                            transform: translateX(p(-160));
                        }
                        80% {
                            transform: translateX(p(-200));
                        }
                        90% {
                            transform: translateX(p(-200));
                        }
                        100% {
                            transform: translateX(p(-240));
                            opacity: 0;
                        }
                    }
                    img:nth-child(2) {
                        width: p(112);
                        margin-right: p(80);
                        margin-left: p(66);
                        position: absolute;
                        top: 0;
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 5s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(3) {
                        width: p(64);
                        margin-right: p(68);
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 6s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(4) {
                        width: p(63);
                        position: absolute;
                        right: 0;
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 7s;
                        animation-iteration-count: infinite;
                    }
                
                }
               .dong{
                    .wangt {
                        height: p(63);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "A   《Bang Bang Bang》";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .qiangt {
                        height: p(63);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        margin-top: p(29);
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "B   《Fantastic baby》";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/neiye-2.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .yuant {
                        height: p(63);
                        margin-top: p(29);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "C   《If You》";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .kait {
                        height: p(63);
                        margin-top: p(29);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(20);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "D   《Let’s Not Fall In Love》";
                            font-size: p(20);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    #baby {
                        display: none;
                    }
                    #baby:checked~label .qiangt::after {
                        display: block;
                    }
                    #Bang{
                        display: none;
                    }
                    #Bang:checked~label .wangt::after {
                        display: block;
                    }
                    #If{
                        display: none;
                    }
                    #If:checked~label .yuant::after {
                        display: block;
                    }
                    #Love{
                        display: none;
                    }
                    #Love:checked~label .kait::after {
                        display: block;
                    }
                
               }
               .dog{
                   
                    position: relative;
                    img:nth-child(1) {
                        position: absolute;
                        right: p(80);
                        width: p(83);
                        z-index: 2;
                    }
                    img:nth-child(2) {
                        position: absolute;
                        right: p(80);
                        width: p(65);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 800ms;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    @keyframes yuefu {
                        0% {
                            transform: translateY(p(-30));
                        }
                        10% {
                            transform: translateY(p(-60));
                        }
                        20% {
                            transform: translateY(p(-90));
                        }
                        30% {
                            transform: translateY(p(-120));
                        }
                        40% {
                            transform: translateY(p(-150));
                        }
                        50% {
                            transform: translateY(p(-180));
                        }
                        60% {
                            transform: translateY(p(-210));
                            opacity: 0.8;
                        }
                        70% {
                            transform: translateY(p(-240));
                            opacity: 0.6;
                        }
                        80% {
                            transform: translateY(p(-270));
                            opacity: 0.4;
                        }
                        90% {
                            transform: translateY(p(-300));
                            opacity: 0.2;
                        }
                        100% {
                            transform: translateY(p(-320));
                            opacity: 0;
                        }
                    }
                    img:nth-child(3) {
                        position: absolute;
                        right: p(80);
                        width: p(69);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(4) {
                        position: absolute;
                        right: p(80);
                        width: p(75);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.2s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(5) {
                        position: absolute;
                        right: p(80);
                        width: p(74);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.5s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(6) {
                        position: absolute;
                        right: p(65);
                        width: p(104);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.6s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                
               }

            }
            //第十六题
            .tuang{
                position: relative;
                background: url(../img/haoyou-3.png) no-repeat;
                background-size: cover;
                overflow: hidden;
                h1{
                    width: p(526);
                    font-size: p(32);
                    color: white;
                    font-weight: normal;
                   margin: auto;
                    margin-top: p(104);
                }
                .hul{
                    margin: auto;
                    margin-top: p(80);
                    width: p(250);
                    height: p(350);
                    overflow: hidden;
                    position: relative;
                    z-index: 1;
                    img{
                        width: 100%;
                      vertical-align: top;
                    }
                }
                .yf{
                    width: p(45);
                    height: p(50);
                    overflow: hidden;
                    position: absolute;
                    top: p(200);
                    right: p(246);
                    img{
                        vertical-align: top;
                        width: 100%;
                    }
                }
                .xy{
                    position: relative;
                    top: p(-180);
                    text-align: center;
                    img:nth-child(1) {
                        position: absolute;
                        top: p(100);
                        left: p(100);
                        width: p(112);
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 4s;
                        animation-iteration-count: infinite;
                    }
                    @keyframes hy {
                        0% {
                            transform: translateX(0);
                        }
                        20% {
                            transform: translateX(p(-80));
                        }
                        40% {
                            transform: translateX(p(-120));
                        }
                        60% {
                            transform: translateX(p(-160));
                        }
                        80% {
                            transform: translateX(p(-200));
                        }
                        90% {
                            transform: translateX(p(-200));
                        }
                        100% {
                            transform: translateX(p(-240));
                            opacity: 0;
                        }
                    }
                    img:nth-child(2) {
                        width: p(112);
                        margin-right: p(80);
                        margin-left: p(66);
                        position: absolute;
                        top: 0;
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 5s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(3) {
                        width: p(64);
                        margin-right: p(68);
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 6s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(4) {
                        width: p(63);
                        position: absolute;
                        right: 0;
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 7s;
                        animation-iteration-count: infinite;
                    }
                
                }
               .dong{
                
                    .wangt {
                        height: p(63);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "A   4位";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .qiangt {
                        height: p(63);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        margin-top: p(29);
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "B   5位";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .yuant {
                        height: p(63);
                        margin-top: p(29);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "C   6位";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .kait {
                        height: p(63);
                        margin-top: p(29);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "D   7位";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/neiye-2.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    #wlq{
                        display: none;
                    }
                    #wlq:checked~label .qiangt::after {
                        display: block;
                    }
                    #swl{
                        display: none;
                    }
                    #swl:checked~label .wangt::after {
                        display: block;
                    }
                    #lqb{
                        display: none;
                    }
                    #lqb:checked~label .yuant::after {
                        display: block;
                    }
                    #wei{
                        display: none;
                    }
                    #wei:checked~label .kait::after {
                        display: block;
                    }
                
               }
               .dog{
                   
                    position: relative;
                    img:nth-child(1) {
                        position: absolute;
                        right: p(80);
                        width: p(83);
                        z-index: 2;
                    }
                    img:nth-child(2) {
                        position: absolute;
                        right: p(80);
                        width: p(65);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 800ms;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    @keyframes yuefu {
                        0% {
                            transform: translateY(p(-30));
                        }
                        10% {
                            transform: translateY(p(-60));
                        }
                        20% {
                            transform: translateY(p(-90));
                        }
                        30% {
                            transform: translateY(p(-120));
                        }
                        40% {
                            transform: translateY(p(-150));
                        }
                        50% {
                            transform: translateY(p(-180));
                        }
                        60% {
                            transform: translateY(p(-210));
                            opacity: 0.8;
                        }
                        70% {
                            transform: translateY(p(-240));
                            opacity: 0.6;
                        }
                        80% {
                            transform: translateY(p(-270));
                            opacity: 0.4;
                        }
                        90% {
                            transform: translateY(p(-300));
                            opacity: 0.2;
                        }
                        100% {
                            transform: translateY(p(-320));
                            opacity: 0;
                        }
                    }
                    img:nth-child(3) {
                        position: absolute;
                        right: p(80);
                        width: p(69);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(4) {
                        position: absolute;
                        right: p(80);
                        width: p(75);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.2s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(5) {
                        position: absolute;
                        right: p(80);
                        width: p(74);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.5s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(6) {
                        position: absolute;
                        right: p(65);
                        width: p(104);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.6s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
               }
            }
            //第十七题
            .laba{
                position: relative;
                background: url(../img/haoyou-3.png) no-repeat;
                background-size: cover;
                overflow: hidden;
                h1{
                    width: p(526);
                    font-size: p(32);
                    color: white;
                    font-weight: normal;
                   margin: auto;
                    margin-top: p(104);
                }
                .hul{
                    margin: auto;
                    margin-top: p(80);
                    width: p(250);
                    height: p(350);
                    overflow: hidden;
                    position: relative;
                    z-index: 1;
                    img{
                        width: 100%;
                      vertical-align: top;
                    }
                }
                .yf{
                    width: p(45);
                    height: p(50);
                    overflow: hidden;
                    position: absolute;
                    top: p(200);
                    right: p(246);
                    img{
                        vertical-align: top;
                        width: 100%;
                    }
                }
                .xy{
                    position: relative;
                    top: p(-180);
                    text-align: center;
                    img:nth-child(1) {
                        position: absolute;
                        top: p(100);
                        left: p(100);
                        width: p(112);
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 4s;
                        animation-iteration-count: infinite;
                    }
                    @keyframes hy {
                        0% {
                            transform: translateX(0);
                        }
                        20% {
                            transform: translateX(p(-80));
                        }
                        40% {
                            transform: translateX(p(-120));
                        }
                        60% {
                            transform: translateX(p(-160));
                        }
                        80% {
                            transform: translateX(p(-200));
                        }
                        90% {
                            transform: translateX(p(-200));
                        }
                        100% {
                            transform: translateX(p(-240));
                            opacity: 0;
                        }
                    }
                    img:nth-child(2) {
                        width: p(112);
                        margin-right: p(80);
                        margin-left: p(66);
                        position: absolute;
                        top: 0;
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 5s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(3) {
                        width: p(64);
                        margin-right: p(68);
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 6s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(4) {
                        width: p(63);
                        position: absolute;
                        right: 0;
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 7s;
                        animation-iteration-count: infinite;
                    }
                
                }
               .dong{
                
                    .wangt {
                        height: p(63);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "A   《明明就》";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .qiangt {
                        height: p(63);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        margin-top: p(29);
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "B   《勇敢》";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .yuant {
                        height: p(63);
                        margin-top: p(29);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "C   《匆匆那年》";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .kait {
                        height: p(63);
                        margin-top: p(29);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "D  《别找我麻烦》";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/neiye-2.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    #gant{
                        display: none;
                    }
                    #gant:checked~label .qiangt::after {
                        display: block;
                    }
                    #jiut{
                        display: none;
                    }
                    #jiut:checked~label .wangt::after {
                        display: block;
                    }
                    #nat{
                        display: none;
                    }
                    #nat:checked~label .yuant::after {
                        display: block;
                    }
                    #biet{
                        display: none;
                    }
                    #biet:checked~label .kait::after {
                        display: block;
                    }
                
               }
               .dog{
                   
                    position: relative;
                    img:nth-child(1) {
                        position: absolute;
                        right: p(80);
                        width: p(83);
                        z-index: 2;
                    }
                    img:nth-child(2) {
                        position: absolute;
                        right: p(80);
                        width: p(65);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 800ms;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    @keyframes yuefu {
                        0% {
                            transform: translateY(p(-30));
                        }
                        10% {
                            transform: translateY(p(-60));
                        }
                        20% {
                            transform: translateY(p(-90));
                        }
                        30% {
                            transform: translateY(p(-120));
                        }
                        40% {
                            transform: translateY(p(-150));
                        }
                        50% {
                            transform: translateY(p(-180));
                        }
                        60% {
                            transform: translateY(p(-210));
                            opacity: 0.8;
                        }
                        70% {
                            transform: translateY(p(-240));
                            opacity: 0.6;
                        }
                        80% {
                            transform: translateY(p(-270));
                            opacity: 0.4;
                        }
                        90% {
                            transform: translateY(p(-300));
                            opacity: 0.2;
                        }
                        100% {
                            transform: translateY(p(-320));
                            opacity: 0;
                        }
                    }
                    img:nth-child(3) {
                        position: absolute;
                        right: p(80);
                        width: p(69);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(4) {
                        position: absolute;
                        right: p(80);
                        width: p(75);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.2s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(5) {
                        position: absolute;
                        right: p(80);
                        width: p(74);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.5s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(6) {
                        position: absolute;
                        right: p(65);
                        width: p(104);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.6s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
               }
            
            }
            //第十八题
            .xiu{
                background: url(../img/haoyou-3.png) no-repeat;
                background-size: cover;
                overflow: hidden;
                h1{
                    width: p(526);
                    font-size: p(32);
                    color: white;
                    font-weight: normal;
                   margin: auto;
                    margin-top: p(104);
                }
                .hul{
                    margin: auto;
                    margin-top: p(80);
                    width: p(250);
                    height: p(350);
                    overflow: hidden;
                    position: relative;
                    z-index: 1;
                    img{
                        width: 100%;
                    }
                }
                .xy{
                    position: relative;
                    top: p(-180);
                    text-align: center;
                    img:nth-child(1) {
                        position: absolute;
                        top: p(100);
                        left: p(100);
                        width: p(112);
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 4s;
                        animation-iteration-count: infinite;
                    }
                    @keyframes hy {
                        0% {
                            transform: translateX(0);
                        }
                        20% {
                            transform: translateX(p(-80));
                        }
                        40% {
                            transform: translateX(p(-120));
                        }
                        60% {
                            transform: translateX(p(-160));
                        }
                        80% {
                            transform: translateX(p(-200));
                        }
                        90% {
                            transform: translateX(p(-200));
                        }
                        100% {
                            transform: translateX(p(-240));
                            opacity: 0;
                        }
                    }
                    img:nth-child(2) {
                        width: p(112);
                        margin-right: p(80);
                        margin-left: p(66);
                        position: absolute;
                        top: 0;
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 5s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(3) {
                        width: p(64);
                        margin-right: p(68);
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 6s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(4) {
                        width: p(63);
                        position: absolute;
                        right: 0;
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 7s;
                        animation-iteration-count: infinite;
                    }
                
                }
               .dong{
                    .wangt {
                        height: p(63);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "A   李克勤";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .qiangt {
                        height: p(63);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        margin-top: p(29);
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "B   徐峥";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .yuant {
                        height: p(63);
                        margin-top: p(29);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "C   范玮琪";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/neiye-2.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .kait {
                        height: p(63);
                        margin-top: p(29);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "D   周杰伦";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    #zhengt{
                        display: none;
                    }
                    #zhengt:checked~label .qiangt::after {
                        display: block;
                    }
                    #ket{
                        display: none;
                    }
                    #ket:checked~label .wangt::after {
                        display: block;
                    }
                    #weit{
                        display: none;
                    }
                    #weit:checked~label .yuant::after {
                        display: block;
                    }
                    #lunt{
                        display: none;
                    }
                    #lunt:checked~label .kait::after {
                        display: block;
                    }
               }
               .dog{
                   
                    position: relative;
                    img:nth-child(1) {
                        position: absolute;
                        right: p(80);
                        width: p(83);
                        z-index: 2;
                    }
                    img:nth-child(2) {
                        position: absolute;
                        right: p(80);
                        width: p(65);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 800ms;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    @keyframes yuefu {
                        0% {
                            transform: translateY(p(-30));
                        }
                        10% {
                            transform: translateY(p(-60));
                        }
                        20% {
                            transform: translateY(p(-90));
                        }
                        30% {
                            transform: translateY(p(-120));
                        }
                        40% {
                            transform: translateY(p(-150));
                        }
                        50% {
                            transform: translateY(p(-180));
                        }
                        60% {
                            transform: translateY(p(-210));
                            opacity: 0.8;
                        }
                        70% {
                            transform: translateY(p(-240));
                            opacity: 0.6;
                        }
                        80% {
                            transform: translateY(p(-270));
                            opacity: 0.4;
                        }
                        90% {
                            transform: translateY(p(-300));
                            opacity: 0.2;
                        }
                        100% {
                            transform: translateY(p(-320));
                            opacity: 0;
                        }
                    }
                    img:nth-child(3) {
                        position: absolute;
                        right: p(80);
                        width: p(69);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(4) {
                        position: absolute;
                        right: p(80);
                        width: p(75);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.2s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(5) {
                        position: absolute;
                        right: p(80);
                        width: p(74);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.5s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(6) {
                        position: absolute;
                        right: p(65);
                        width: p(104);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.6s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                
               }
            
            }
            //第十九题
            .zhou{
                background: url(../img/haoyou-3.png) no-repeat;
                background-size: cover;
                overflow: hidden;
                h1{
                    width: p(526);
                    font-size: p(32);
                    color: white;
                    font-weight: normal;
                   margin: auto;
                    margin-top: p(104);
                }
                .hul{
                    margin: auto;
                    margin-top: p(80);
                    width: p(250);
                    height: p(350);
                    overflow: hidden;
                    position: relative;
                    z-index: 1;
                    img{
                        width: 100%;
                    }
                }
                .xy{
                    position: relative;
                    top: p(-180);
                    text-align: center;
                    img:nth-child(1) {
                        position: absolute;
                        top: p(100);
                        left: p(100);
                        width: p(112);
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 4s;
                        animation-iteration-count: infinite;
                    }
                    @keyframes hy {
                        0% {
                            transform: translateX(0);
                        }
                        20% {
                            transform: translateX(p(-80));
                        }
                        40% {
                            transform: translateX(p(-120));
                        }
                        60% {
                            transform: translateX(p(-160));
                        }
                        80% {
                            transform: translateX(p(-200));
                        }
                        90% {
                            transform: translateX(p(-200));
                        }
                        100% {
                            transform: translateX(p(-240));
                            opacity: 0;
                        }
                    }
                    img:nth-child(2) {
                        width: p(112);
                        margin-right: p(80);
                        margin-left: p(66);
                        position: absolute;
                        top: 0;
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 5s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(3) {
                        width: p(64);
                        margin-right: p(68);
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 6s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(4) {
                        width: p(63);
                        position: absolute;
                        right: 0;
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 7s;
                        animation-iteration-count: infinite;
                    }
                
                }
               .dong{
                    .wangt {
                        height: p(63);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "A   10张";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .qiangt {
                        height: p(63);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        margin-top: p(29);
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "B   12张";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .yuant {
                        height: p(63);
                        margin-top: p(29);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "C   13张";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/neiye-2.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .kait {
                        height: p(63);
                        margin-top: p(29);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "D   15张";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    #zhengtt{
                        display: none;
                    }
                    #zhengtt:checked~label .qiangt::after {
                        display: block;
                    }
                    #kett{
                        display: none;
                    }
                    #kett:checked~label .wangt::after {
                        display: block;
                    }
                    #weitt{
                        display: none;
                    }
                    #weitt:checked~label .yuant::after {
                        display: block;
                    }
                    #luntt{
                        display: none;
                    }
                    #luntt:checked~label .kait::after {
                        display: block;
                    }
               }
               .dog{
                   
                    position: relative;
                    img:nth-child(1) {
                        position: absolute;
                        right: p(80);
                        width: p(83);
                        z-index: 2;
                    }
                    img:nth-child(2) {
                        position: absolute;
                        right: p(80);
                        width: p(65);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 800ms;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    @keyframes yuefu {
                        0% {
                            transform: translateY(p(-30));
                        }
                        10% {
                            transform: translateY(p(-60));
                        }
                        20% {
                            transform: translateY(p(-90));
                        }
                        30% {
                            transform: translateY(p(-120));
                        }
                        40% {
                            transform: translateY(p(-150));
                        }
                        50% {
                            transform: translateY(p(-180));
                        }
                        60% {
                            transform: translateY(p(-210));
                            opacity: 0.8;
                        }
                        70% {
                            transform: translateY(p(-240));
                            opacity: 0.6;
                        }
                        80% {
                            transform: translateY(p(-270));
                            opacity: 0.4;
                        }
                        90% {
                            transform: translateY(p(-300));
                            opacity: 0.2;
                        }
                        100% {
                            transform: translateY(p(-320));
                            opacity: 0;
                        }
                    }
                    img:nth-child(3) {
                        position: absolute;
                        right: p(80);
                        width: p(69);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(4) {
                        position: absolute;
                        right: p(80);
                        width: p(75);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.2s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(5) {
                        position: absolute;
                        right: p(80);
                        width: p(74);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.5s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(6) {
                        position: absolute;
                        right: p(65);
                        width: p(104);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.6s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
               }
            }
            //第二十题
            .wa{
                background: url(../img/haoyou-3.png) no-repeat;
                background-size: cover;
                overflow: hidden;
                h1{
                    width: p(526);
                    font-size: p(32);
                    color: white;
                    font-weight: normal;
                   margin: auto;
                    margin-top: p(104);
                }
                .hul{
                    margin: auto;
                    margin-top: p(80);
                    width: p(250);
                    height: p(350);
                    overflow: hidden;
                    position: relative;
                    z-index: 1;
                    img{
                        width: 100%;
                    }
                }
                .xy{
                    position: relative;
                    top: p(-180);
                    text-align: center;
                    img:nth-child(1) {
                        position: absolute;
                        top: p(100);
                        left: p(100);
                        width: p(112);
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 4s;
                        animation-iteration-count: infinite;
                    }
                    @keyframes hy {
                        0% {
                            transform: translateX(0);
                        }
                        20% {
                            transform: translateX(p(-80));
                        }
                        40% {
                            transform: translateX(p(-120));
                        }
                        60% {
                            transform: translateX(p(-160));
                        }
                        80% {
                            transform: translateX(p(-200));
                        }
                        90% {
                            transform: translateX(p(-200));
                        }
                        100% {
                            transform: translateX(p(-240));
                            opacity: 0;
                        }
                    }
                    img:nth-child(2) {
                        width: p(112);
                        margin-right: p(80);
                        margin-left: p(66);
                        position: absolute;
                        top: 0;
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 5s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(3) {
                        width: p(64);
                        margin-right: p(68);
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 6s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(4) {
                        width: p(63);
                        position: absolute;
                        right: 0;
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 7s;
                        animation-iteration-count: infinite;
                    }
                
                }
               .dong{
                    .wangt {
                        height: p(63);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "A   周杰伦";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .qiangt {
                        height: p(63);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        margin-top: p(29);
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "B   范玮琪";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .yuant {
                        height: p(63);
                        margin-top: p(29);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "C   陶喆";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/neiye-2.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .kait {
                        height: p(63);
                        margin-top: p(29);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "D   谢霆锋";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    #fang{
                        display: none;
                    }
                    #fang:checked~label .qiangt::after {
                        display: block;
                    }
                    #zjl{
                        display: none;
                    }
                    #zjl:checked~label .wangt::after {
                        display: block;
                    }
                    #tao{
                        display: none;
                    }
                    #tao:checked~label .yuant::after {
                        display: block;
                    }
                    #xie{
                        display: none;
                    }
                    #xie:checked~label .kait::after {
                        display: block;
                    }
               }
               .dog{
                   
                    position: relative;
                    img:nth-child(1) {
                        position: absolute;
                        right: p(80);
                        width: p(83);
                        z-index: 2;
                    }
                    img:nth-child(2) {
                        position: absolute;
                        right: p(80);
                        width: p(65);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 800ms;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    @keyframes yuefu {
                        0% {
                            transform: translateY(p(-30));
                        }
                        10% {
                            transform: translateY(p(-60));
                        }
                        20% {
                            transform: translateY(p(-90));
                        }
                        30% {
                            transform: translateY(p(-120));
                        }
                        40% {
                            transform: translateY(p(-150));
                        }
                        50% {
                            transform: translateY(p(-180));
                        }
                        60% {
                            transform: translateY(p(-210));
                            opacity: 0.8;
                        }
                        70% {
                            transform: translateY(p(-240));
                            opacity: 0.6;
                        }
                        80% {
                            transform: translateY(p(-270));
                            opacity: 0.4;
                        }
                        90% {
                            transform: translateY(p(-300));
                            opacity: 0.2;
                        }
                        100% {
                            transform: translateY(p(-320));
                            opacity: 0;
                        }
                    }
                    img:nth-child(3) {
                        position: absolute;
                        right: p(80);
                        width: p(69);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(4) {
                        position: absolute;
                        right: p(80);
                        width: p(75);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.2s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(5) {
                        position: absolute;
                        right: p(80);
                        width: p(74);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.5s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(6) {
                        position: absolute;
                        right: p(65);
                        width: p(104);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.6s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
               }
            
            }
            //第二十一题
            .alin{
                position: relative;
                background: url(../img/haoyou-3.png) no-repeat;
                background-size: cover;
                overflow: hidden;
                h1{
                    width: p(526);
                    font-size: p(32);
                    color: white;
                    font-weight: normal;
                   margin: auto;
                    margin-top: p(104);
                }
                .hul{
                    margin: auto;
                    margin-top: p(80);
                    width: p(250);
                    height: p(350);
                    overflow: hidden;
                    position: relative;
                    z-index: 1;
                    img{
                        width: 100%;
                      vertical-align: top;
                    }
                }
                .yf{
                    width: p(45);
                    height: p(50);
                    overflow: hidden;
                    position: absolute;
                    top: p(200);
                    right: p(246);
                    img{
                        vertical-align: top;
                        width: 100%;
                    }
                }
                .xy{
                    position: relative;
                    top: p(-180);
                    text-align: center;
                    img:nth-child(1) {
                        position: absolute;
                        top: p(100);
                        left: p(100);
                        width: p(112);
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 4s;
                        animation-iteration-count: infinite;
                    }
                    @keyframes hy {
                        0% {
                            transform: translateX(0);
                        }
                        20% {
                            transform: translateX(p(-80));
                        }
                        40% {
                            transform: translateX(p(-120));
                        }
                        60% {
                            transform: translateX(p(-160));
                        }
                        80% {
                            transform: translateX(p(-200));
                        }
                        90% {
                            transform: translateX(p(-200));
                        }
                        100% {
                            transform: translateX(p(-240));
                            opacity: 0;
                        }
                    }
                    img:nth-child(2) {
                        width: p(112);
                        margin-right: p(80);
                        margin-left: p(66);
                        position: absolute;
                        top: 0;
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 5s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(3) {
                        width: p(64);
                        margin-right: p(68);
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 6s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(4) {
                        width: p(63);
                        position: absolute;
                        right: 0;
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 7s;
                        animation-iteration-count: infinite;
                    }
                
                }
               .dong{
                
                    .wangt {
                        height: p(63);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "A   歌手";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .qiangt {
                        height: p(63);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        margin-top: p(29);
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "B   演员";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .yuant {
                        height: p(63);
                        margin-top: p(29);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "C   医生";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .kait {
                        height: p(63);
                        margin-top: p(29);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "D  调酒师";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/neiye-2.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    #ganttt{
                        display: none;
                    }
                    #ganttt:checked~label .qiangt::after {
                        display: block;
                    }
                    #jiuttt{
                        display: none;
                    }
                    #jiuttt:checked~label .wangt::after {
                        display: block;
                    }
                    #natt{
                        display: none;
                    }
                    #natt:checked~label .yuant::after {
                        display: block;
                    }
                    #biett{
                        display: none;
                    }
                    #biett:checked~label .kait::after {
                        display: block;
                    }
                
               }
               .dog{
                   
                    position: relative;
                    img:nth-child(1) {
                        position: absolute;
                        right: p(80);
                        width: p(83);
                        z-index: 2;
                    }
                    img:nth-child(2) {
                        position: absolute;
                        right: p(80);
                        width: p(65);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 800ms;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    @keyframes yuefu {
                        0% {
                            transform: translateY(p(-30));
                        }
                        10% {
                            transform: translateY(p(-60));
                        }
                        20% {
                            transform: translateY(p(-90));
                        }
                        30% {
                            transform: translateY(p(-120));
                        }
                        40% {
                            transform: translateY(p(-150));
                        }
                        50% {
                            transform: translateY(p(-180));
                        }
                        60% {
                            transform: translateY(p(-210));
                            opacity: 0.8;
                        }
                        70% {
                            transform: translateY(p(-240));
                            opacity: 0.6;
                        }
                        80% {
                            transform: translateY(p(-270));
                            opacity: 0.4;
                        }
                        90% {
                            transform: translateY(p(-300));
                            opacity: 0.2;
                        }
                        100% {
                            transform: translateY(p(-320));
                            opacity: 0;
                        }
                    }
                    img:nth-child(3) {
                        position: absolute;
                        right: p(80);
                        width: p(69);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(4) {
                        position: absolute;
                        right: p(80);
                        width: p(75);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.2s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(5) {
                        position: absolute;
                        right: p(80);
                        width: p(74);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.5s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(6) {
                        position: absolute;
                        right: p(65);
                        width: p(104);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.6s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
               }
            
            
            }
            //第二十二题
            .nawei{
                position: relative;
                background: url(../img/haoyou-3.png) no-repeat;
                background-size: cover;
                overflow: hidden;
                h1{
                    width: p(526);
                    font-size: p(32);
                    color: white;
                    font-weight: normal;
                   margin: auto;
                    margin-top: p(104);
                }
                .hul{
                    margin: auto;
                    margin-top: p(80);
                    width: p(250);
                    height: p(350);
                    overflow: hidden;
                    position: relative;
                    z-index: 1;
                    img{
                        width: 100%;
                      vertical-align: top;
                    }
                }
                .yf{
                    width: p(45);
                    height: p(50);
                    overflow: hidden;
                    position: absolute;
                    top: p(200);
                    right: p(246);
                    img{
                        vertical-align: top;
                        width: 100%;
                    }
                }
                .xy{
                    position: relative;
                    top: p(-180);
                    text-align: center;
                    img:nth-child(1) {
                        position: absolute;
                        top: p(100);
                        left: p(100);
                        width: p(112);
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 4s;
                        animation-iteration-count: infinite;
                    }
                    @keyframes hy {
                        0% {
                            transform: translateX(0);
                        }
                        20% {
                            transform: translateX(p(-80));
                        }
                        40% {
                            transform: translateX(p(-120));
                        }
                        60% {
                            transform: translateX(p(-160));
                        }
                        80% {
                            transform: translateX(p(-200));
                        }
                        90% {
                            transform: translateX(p(-200));
                        }
                        100% {
                            transform: translateX(p(-240));
                            opacity: 0;
                        }
                    }
                    img:nth-child(2) {
                        width: p(112);
                        margin-right: p(80);
                        margin-left: p(66);
                        position: absolute;
                        top: 0;
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 5s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(3) {
                        width: p(64);
                        margin-right: p(68);
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 6s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(4) {
                        width: p(63);
                        position: absolute;
                        right: 0;
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 7s;
                        animation-iteration-count: infinite;
                    }
                
                }
               .dong{
                
                    .wangt {
                        height: p(63);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "A   杨臣刚";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .qiangt {
                        height: p(63);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        margin-top: p(29);
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "B   孙楠";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/neiye-2.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .yuant {
                        height: p(63);
                        margin-top: p(29);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "C   王大治";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .kait {
                        height: p(63);
                        margin-top: p(29);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(15);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "D  什么鬼";
                            font-size: p(28);
                            padding-left: p(15);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    #sun{
                        display: none;
                    }
                    #sun:checked~label .qiangt::after {
                        display: block;
                    }
                    #ceng{
                        display: none;
                    }
                    #ceng:checked~label .wangt::after {
                        display: block;
                    }
                    #dazhi{
                        display: none;
                    }
                    #dazhi:checked~label .yuant::after {
                        display: block;
                    }
                    #shen{
                        display: none;
                    }
                    #shen:checked~label .kait::after {
                        display: block;
                    }
               }
               .dog{
                   
                    position: relative;
                    img:nth-child(1) {
                        position: absolute;
                        right: p(80);
                        width: p(83);
                        z-index: 2;
                    }
                    img:nth-child(2) {
                        position: absolute;
                        right: p(80);
                        width: p(65);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 800ms;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    @keyframes yuefu {
                        0% {
                            transform: translateY(p(-30));
                        }
                        10% {
                            transform: translateY(p(-60));
                        }
                        20% {
                            transform: translateY(p(-90));
                        }
                        30% {
                            transform: translateY(p(-120));
                        }
                        40% {
                            transform: translateY(p(-150));
                        }
                        50% {
                            transform: translateY(p(-180));
                        }
                        60% {
                            transform: translateY(p(-210));
                            opacity: 0.8;
                        }
                        70% {
                            transform: translateY(p(-240));
                            opacity: 0.6;
                        }
                        80% {
                            transform: translateY(p(-270));
                            opacity: 0.4;
                        }
                        90% {
                            transform: translateY(p(-300));
                            opacity: 0.2;
                        }
                        100% {
                            transform: translateY(p(-320));
                            opacity: 0;
                        }
                    }
                    img:nth-child(3) {
                        position: absolute;
                        right: p(80);
                        width: p(69);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(4) {
                        position: absolute;
                        right: p(80);
                        width: p(75);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.2s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(5) {
                        position: absolute;
                        right: p(80);
                        width: p(74);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.5s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(6) {
                        position: absolute;
                        right: p(65);
                        width: p(104);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.6s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
               }
            
            }
            //第二十三题
            .login{
                position: relative;
                background: url(../img/haoyou-3.png) no-repeat;
                background-size: cover;
                overflow: hidden;
                h1{
                    width: p(526);
                    font-size: p(32);
                    color: white;
                    font-weight: normal;
                   margin: auto;
                    margin-top: p(104);
                }
                .hul{
                    margin: auto;
                    margin-top: p(80);
                    width: p(376);
                    height: p(314);
                    overflow: hidden;
                    position: relative;
                    z-index: 1;
                    img{
                        width: 100%;
                      vertical-align: top;
                    }
                }
                .yf{
                    width: p(45);
                    height: p(50);
                    overflow: hidden;
                    position: absolute;
                    top: p(200);
                    right: p(246);
                    img{
                        vertical-align: top;
                        width: 100%;
                    }
                }
                .xy{
                    position: relative;
                    top: p(-180);
                    text-align: center;
                    img:nth-child(1) {
                        position: absolute;
                        top: p(100);
                        left: p(100);
                        width: p(112);
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 4s;
                        animation-iteration-count: infinite;
                    }
                    @keyframes hy {
                        0% {
                            transform: translateX(0);
                        }
                        20% {
                            transform: translateX(p(-80));
                        }
                        40% {
                            transform: translateX(p(-120));
                        }
                        60% {
                            transform: translateX(p(-160));
                        }
                        80% {
                            transform: translateX(p(-200));
                        }
                        90% {
                            transform: translateX(p(-200));
                        }
                        100% {
                            transform: translateX(p(-240));
                            opacity: 0;
                        }
                    }
                    img:nth-child(2) {
                        width: p(112);
                        margin-right: p(80);
                        margin-left: p(66);
                        position: absolute;
                        top: 0;
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 5s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(3) {
                        width: p(64);
                        margin-right: p(68);
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 6s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(4) {
                        width: p(63);
                        position: absolute;
                        right: 0;
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 7s;
                        animation-iteration-count: infinite;
                    }
                
                }
               .dong{
                
                    .wangt {
                        height: p(63);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(156);
//                          text-align: center;
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "A ";
                            font-size: p(28);
                            padding-left: p(156);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/neiye-2.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .qiangt {
                        height: p(63);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        margin-top: p(29);
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(156);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "B ";
                            font-size: p(28);
                            padding-left: p(156);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .yuant {
                        height: p(63);
                        margin-top: p(29);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(156);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "C ";
                            font-size: p(28);
                            padding-left: p(156);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    .kait {
                        height: p(63);
                        margin-top: p(29);
                        background: url(../img/neiye-4.png) no-repeat;
                        background-size: p(367), p(63);
                        margin-left: p(57);
                        position: relative;
                        left: -100%;
                        span {
                            line-height: p(50);
                            margin-left: p(156);
                            vertical-align: top;
                            font-size: p(28);
                        }
                        &::after {
                            display: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: "D";
                            font-size: p(28);
                            padding-left: p(156);
                            padding-top: p(5);
                            width: p(367);
                            height: p(63);
                            background: url(../img/answer-active.png) no-repeat;
                            background-size: p(367), p(63);
                        }
                    }
                    #longi{
                        display: none;
                    }
                    #longi:checked~label .qiangt::after {
                        display: block;
                    }
                    #longl{
                        display: none;
                    }
                    #longl:checked~label .wangt::after {
                        display: block;
                    }
                    #longe{
                        display: none;
                    }
                    #longe:checked~label .yuant::after {
                        display: block;
                    }
                    #longt{
                        display: none;
                    }
                    #longt:checked~label .kait::after {
                        display: block;
                    }
               }
               .dog{
                   
                    position: relative;
                    img:nth-child(1) {
                        position: absolute;
                        right: p(80);
                        width: p(83);
                        z-index: 2;
                    }
                    img:nth-child(2) {
                        position: absolute;
                        right: p(80);
                        width: p(65);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 800ms;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    @keyframes yuefu {
                        0% {
                            transform: translateY(p(-30));
                        }
                        10% {
                            transform: translateY(p(-60));
                        }
                        20% {
                            transform: translateY(p(-90));
                        }
                        30% {
                            transform: translateY(p(-120));
                        }
                        40% {
                            transform: translateY(p(-150));
                        }
                        50% {
                            transform: translateY(p(-180));
                        }
                        60% {
                            transform: translateY(p(-210));
                            opacity: 0.8;
                        }
                        70% {
                            transform: translateY(p(-240));
                            opacity: 0.6;
                        }
                        80% {
                            transform: translateY(p(-270));
                            opacity: 0.4;
                        }
                        90% {
                            transform: translateY(p(-300));
                            opacity: 0.2;
                        }
                        100% {
                            transform: translateY(p(-320));
                            opacity: 0;
                        }
                    }
                    img:nth-child(3) {
                        position: absolute;
                        right: p(80);
                        width: p(69);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(4) {
                        position: absolute;
                        right: p(80);
                        width: p(75);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.2s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(5) {
                        position: absolute;
                        right: p(80);
                        width: p(74);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.5s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(6) {
                        position: absolute;
                        right: p(65);
                        width: p(104);
                        z-index: 1;
                        transform: translateY(0px);
                        animation-name: yuefu;
                        animation-delay: 1.6s;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                    }
               }
            }
            //第二十四题
            .ceshi{
                background: url(../img/haoyou-3.png) no-repeat;
                background-size: cover;
                .logo{
                    width: p(103);
                    height: p(38);
                    margin-left: p(44);
                    margin-top: p(44);
                    overflow: hidden;
                    img{
                        vertical-align: top;
                        width: 100%;
                    }
                }
                .xy{
                    position: relative;
                    top: p(250);
                    text-align: center;
                    img:nth-child(1) {
                        position: absolute;
                        top: p(100);
                        left: p(100);
                        width: p(112);
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 4s;
                        animation-iteration-count: infinite;
                    }
                    @keyframes hy {
                        0% {
                            transform: translateX(0);
                        }
                       
                        100% {
                            transform: translateX(p(-600));
                            opacity: 0;
                        }
                    }
                    img:nth-child(2) {
                        width: p(112);
                        margin-right: p(80);
                        margin-left: p(66);
                        position: absolute;
                        top: 0;
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 5s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(3) {
                        width: p(64);
                        margin-right: p(68);
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 6s;
                        animation-iteration-count: infinite;
                    }
                    img:nth-child(4) {
                        width: p(63);
                        position: absolute;
                        right: 0;
                        transform: translateX(0);
                        animation-name: hy;
                        animation-duration: 7s;
                        animation-iteration-count: infinite;
                    }
                    
                }
                .fengxiang{
                    height: 100%;
                    background: url(../img/ceshi-1.png) no-repeat;
                    background-size: p(534),p(846);
                    position: relative;
                    left: 13%;
                    top: p(18);
                    overflow: hidden;
                    
                    h1{
                        margin-top: p(73);
                        width: p(534);
                        text-align: center;
                        font-size: p(36);
                        color: #36ff00;
                    }
                    .xuanz{
                         width: p(534);
                         text-align: center;
                        p{
                            margin-top: p(27);
                            font-size: p(36);
                            color: white;
                            span{
                                font-size: p(36);
                                color:#36ff00 ;
                            }
                        }
                    }
                    .fx{
                        width: p(260);
                        height: p(333);
                        overflow: hidden;
                        position: absolute;
                        top: p(600);
                        left: p(36);
                        img{
                            width: 100%;
                        }
                    }
                    .yao{
                        position: absolute;
                        top: p(700);
                        left: p(260);
                        width: p(200);
                        height: p(71);
                        background: #deff00;
                        text-align: center;
                        border-radius: p(9);
                        box-shadow: p(6) p(8) p(18) #4e580e;
                        a{
                            vertical-align: top;
                            line-height: p(71);
                            font-size: p(33);
                            color: #000000;
                        }
                    }
                }
            }
            //第二十五题
            .reng{
                position: relative;
                 background: url(../img/haoyou-3.png) no-repeat;
                background-size: cover;
                .logo{
                    width: p(103);
                    height: p(38);
                    margin-left: p(44);
                    margin-top: p(44);
                    overflow: hidden;
                    img{
                        vertical-align: top;
                        width: 100%;
                    }
                }
                .xaiog{
                    margin: auto;
                    margin-top: p(35);
                    width: p(173);
                    height: p(173);
                    border-radius: 50%;
                    overflow: hidden;
                    img{
                        height: 100%;
                    }
                }
                p{
                    margin-top: p(23);
                    font-size:p(32) ;
                    color: white;
                    text-align: center;
                    span{
                        font-size: p(32);
                        color: #fff000;
                    }
                }
                .p1{
                  margin-left: p(-172);
                    font-size: p(32);
                    color: white;
                }
                p:nth-child(7){
                    font-size: p(32);
                    color: white;
                     margin-left: p(-420);
                }
                .ooh{
                    position: relative;
                    .clr{
                        position: absolute;
                        top: p(20);
                        right: p(50);
                        width: p(167);
                        height: p(56);
                        border-radius: p(23);
                        background: #bcccd9;
                        font-size: p(24);
                        color: #000000;
                        line-height: p(56);
                    }
                    .xi{
                        position: absolute;
                        top: p(100);
                        left: p(102);
                        width: p(132);
                        height: p(56);
                        border-radius: p(24);
                        color: #2f3400;
                        font-size: p(24);
                        line-height: p(56);
                        background: #5b717a;
                    }
                    .ru{
                          position: absolute;
                          top: p(136);
                          left: p(240);
                        width: p(178);
                        height: p(56);
                        border-radius: p(24);
                        color: #2f3400;
                        font-size: p(24);
                        line-height: p(56);
                        background: #a1b25f;
                    }
                    .xire{
                          position: absolute;
                          top: p(160);
                          left: p(420);
                        width: p(190);
                        height: p(56);
                        border-radius: p(24);
                        color: #2f3400;
                        font-size: p(24);
                        line-height: p(56);
                        background: #c4c227;
                    }
                    .nidu{
                      position: absolute;
                      top: p(264);
                      left: p(126);
                        font-size: p(24);
                        color: white;
                    }
                    textarea{
                          position: absolute;
                      top: p(360);
                      left: p(120);
                        width: p(495);
                        height: p(71);
                        border: p(2) solid white;
                        border-radius: p(4);
                        resize: none;
                        background: transparent;
                    }
                    input{
                        position: absolute;
                        top: p(472);
                        left: p(166);
                        width: p(138);
                        height: p(47);
                        color: #454543;
                        font-size: p(24);
                        background: #a7a7a7;
                        border-radius: p(8);
                         box-shadow: p(6) p(8) p(18) #494949;
                    }
                    .yyw{
                        position: absolute;
                        top: p(472);
                        left: p(420);
                        a{
                            text-align: center;
                            line-height: p(47);
                           display: block;
                            width: p(138);
                        height: p(47);
                        color: #384000;
                        font-size: p(24);
                        background: #deff00;
                        border-radius: p(8);
                         box-shadow: p(6) p(8) p(18) #4e580e;
                        }
                    }
                   
                }
                 .gaoz{
                        position: absolute;
                       transform: scale(0);
                       transition-duration: 500ms;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        background: #02050b;
                        .jidong{
                            margin: auto;
                            margin-top: p(310);
                            width: p(168);
                            height: p(166);
                            border-radius: 50%;
                            img{
                                width: 100%;
                            }
                        }
                        .xia{
                            font-size: p(36);
                            color: white;
                        }
                    }
                    #kug{
                        display: none;
                    }
                    #kug:checked~.gaoz{
                        transform: scale(1);
                    }
               
            }
            //第二十六题
            .erweima{
                position: relative;
                 background: url(../img/haoyou-3.png) no-repeat;
                background-size: cover;
                .logo{
                    width: p(103);
                    height: p(38);
                    margin-left: p(44);
                    margin-top: p(44);
                    overflow: hidden;
                    img{
                        vertical-align: top;
                        width: 100%;
                    }
                }
                .xaiog{
                    margin: auto;
                    margin-top: p(35);
                    width: p(173);
                    height: p(173);
                    border-radius: 50%;
                    overflow: hidden;
                    img{
                        height: 100%;
                    }
                }
                .yang{
                    margin: auto;
                    margin-top: p(28);
                    width: p(400);
                    text-align: center;
                    line-height: p(60);
                    font-size: p(24);
                    height: p(52);
                    color: white;
                    background: url(../img/qizhi.png) no-repeat;
                    background-size: p(397),p(53);
                }
                .shouju{
                    margin: auto;
                    margin-top: p(64);
                    width:p(400);
                    line-height:p(23);
                    text-align: center;
                    font-size: p(23);
                    color: white;
                    margin-bottom: p(112);
                }
                .kgy{
                    margin-left:p(89);
                    font-size: 0;
                    margin-top: p(30);
                    .ygou{
                        display: inline-block;
                        width: p(59);
                        height: p(59);
                        border-radius: 50%;
                        overflow: hidden;
                        vertical-align: middle;
                        img{
                            height: 100%;
                            vertical-align: top;
                        }
                    }
                    span{
                        margin-left:p(15);
                        display: inline-block;
                        width: p(402);
                        height: p(44);
                        font-size:p(24) ;
                        color: white;
                        background: url(../img/qizhi-1.png) no-repeat;
                          vertical-align: middle;
                          background-size: 100%;
                          line-height:p(44);
                          padding-left:p(20);
                    }
                }
                .foot{
                    position: fixed;
                    bottom: 0;
                    width: 100%;
                    height: p(70);
                    background: #2c2c2c;
                    padding-left:p(64);
                    .foot1{
                        font-size: p(24);
                        color: #fff;
                        vertical-align: top;
                        line-height: p(70);
                    }
                    .guan{
                       a{
                           margin-top:p(10);
                           margin-left:p(24);
                            display: inline-block;
                        width:p(111);
                        height: p(47);
                        border-radius: p(9);
                        font-size: p(24);
                        color: #384000;
                        background: #deff00;
                        vertical-align: top;
                        text-align: center;
                        line-height: p(47);
                       }
                    }
                    .font3{
                        display:inline-block;
                        margin-top: p(20);
                        margin-left: p(50);
                        width:p(36);
                        height: p(28);
                        overflow: hidden;
                          vertical-align: top;
                        img{
                            vertical-align: top;
                            width: 100%;
                        }
                    }
                }
                .gaoz{
                        position: absolute;
                       transform: scale(0);
                       transition-duration: 500ms;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        background: #02050b;
                        .jidong{
                            margin: auto;
                            margin-top: p(310);
                            width: p(314);
                            height: p(314);
                            border-radius: 50%;
                            img{
                                width: 100%;
                            }
                        }
                        .xia{
                            margin: auto;
                            width: p(440);
                            margin-top: p(20);
                            font-size: p(36);
                            color: white;
                        }
                }
                 #weima{
                        display: none;
                    }
                    #weima:checked~.gaoz{
                        transform: scale(1);
                    }
            }
        }
    }
}

.fp-controlArrow {
    display: none;
}

@media only screen and (max-width:321px){
    .web{
        .menu{
            bottom: 0;
        }
    .indexweb{
        .section1{
            padding-top:p(34);
            .chao{
                 margin-top:p(60);
                  margin: auto;
                width: p(360);
                height: p(60);
                overflow: hidden;
                img {
                    width: 100%;
                }
            }
            .hou {
                margin: auto;
                width: p(550);
                height: p(150);
                overflow: hidden;
                img {
                    width: 100%;
                }
            }
            .nian {
                margin: auto;
                width: p(340);
                height: p(55);
                overflow: hidden;
                img {
                    width: 100%;
                }
            }
            .can {
                position: relative;
                margin: auto;
                margin-top: p(8);
                width: p(320);
                height: p(32);
                overflow: hidden;
//              left: -100%;
                img {
                    width: 100%;
                }
            }
            .huang{
                 overflow: hidden;
                position: relative;
                top: p(0);
                right: p(40);
                .huan{
                    top: p(216);
                    left: p(274);
                    width: p(229);
                    height: p(337);
                    overflow: hidden;
                    img{
                        width: 100%;
                    }
                }
                .gui{
                   left: p(482);
                }
                .fei{
                    left: p(536);
                }
                .yue{
                    margin-left: p(132);
                }
            }
        }
        .section2{
            .weiti{
                .man{
                    width: p(212);
                    height: p(298);
                }
                ul{
                    margin-top: p(-100);
                }
            }
            .all{
                .hul{
                    width: p(240);
                    height: p(336);
                }
            }
            .eco{
                  .hul{
                    width: p(222);
                    height: p(310);
                }
            }
            .cheng{
                .hul{
                    width: p(204);
                    height: p(286);
                }
            }
            .ang{
                .hul{
                    margin-top: p(34);
                    width: p(216);
                    height: p(304);
                }
            }
            .xiu{
                .hul{
                    height: p(246);
                }
            }
            .zhou{
                .hul{
                    margin-top: p(50);
                }
                .dong{
                    margin-top: p(-20);
                }
            }
            .wa{
                .hul{
                    height: p(308);
                }
            }
            .ceshi{
                .fengxiang{
                    top: p(-32);
                    left: 9%;
                }
            }
            .reng{
                .ooh{
                    left: p(-40);
                    .clr{
                        right: 0;
                    }
                }
            }
            .erweima{
                .foot{
                    padding-left: p(32);
                    .font3{
                        margin-left: p(32);
                    }
                }
            }
        }
    }
    }
}